Как отобразить background-image за пределами блока

[Алексей2802]

Здравствуйте!

Есть блок шириной 390px и высотой 100px, который является ссылкой.

.div {
  	background-image: url(bg_1.png);
	height: 100px;
	width: 390px;
}

.div:hover {
 	background-image: url(bg_hover.png);
}

<div class="div">
  <a href="#">Текст</a>
</div>
<div class="div">
  <a href="#">Текст</a>
</div>

Можно ли сделать так, чтобы при наведении на блок

       

фон менялся на bg_hover.png

и при этом стрелка слева картинки выходила за пределы блока??

[Switch74]

https://jsfiddle.net/juxmk6fe/5/

[Switch74]

думал это то вы сделает
https://jsfiddle.net/juxmk6fe/4/

 

[SelenIT]

Фоны за границу блока выступать не могут. Но туда могут выступать

• border-image
• тени (box-shadow, text-shadow, filter:drop-shadow)
• псевдоэлементы ::before/::after

Ну и расширить границу блока отрицательным margin-ом тоже можно, конечно

[Switch74]

background, на сколько я знаю, за блок не выйдет. Можно попробовать что-нибудь на вроде такого
https://jsfiddle.net/juxmk6fe/

[Алексей2802]

Это хорошо, но вот в чём проблема https://jsfiddle.net/juxmk6fe/1/

Нужно, чтобы левый и правый блоки были без белого пробела.

К тому же ссылка без наведения должна быть без градиента.

Edited November 30, 2017 by Алексей2802

[Switch74]

тогда так https://jsfiddle.net/juxmk6fe/2/

[Алексей2802]

Не должно быть пробелов между левым и правым блоками!!

Т.е. красная стрелка должна наезжать на левый блок.

Вот так https://jsfiddle.net/juxmk6fe/3/, только теперь справа появляется пустота из-за сдвига стрелки влево.

[Switch74]

 вот видите, можете ведь когда хотите

[Алексей2802]

Так проблема-то не решена - справа появляется пробел!!

[Алексей2802]

Спасибо большое!!! Всё прекрасно работает 

Жалко, что до такой мелочи сам не дотукал..

[Алексей2802]

Покажите, пожалуйста, пример решения проблемы https://jsfiddle.net/juxmk6fe/4/ с помощью псевдоэлемента ::after или ::before...

[Алексей2802]

Спасибо, всё работает