SVG background under image

Question

Так что я пытаюсь сделать, это наложение SVG на изображение при наведении. В конце концов я буду анимировать его, но пока я просто пытаюсь заставить оверлей работать. Это то, что я пробовал:

<div class="centering margin-on-top"> 
    <img id="img1" src="media/circle-1.jpg" /> 
    <img id="img2" src="media/circle-2.jpg" /> 
    <img id="img3" src="media/circle-3.jpg" /> 
</div> 

CSS:

#img1:hover { 
    background: url("../svg/stroke-ears.svg") no-repeat; 
} 

Сначала я думал, что это не работает вообще. Но тогда, когда я помещал наведение на содержащий div div и удалял изображение внутри окна «проверить элемент», svg был там, но скрыт под изображением.

Есть ли способ для меня, возможно, установить z-индекс на изображении или на заднем плане?

Заранее спасибо.

Answer 1

Изменить ваш CSS к этому:

#img1 { 
    position: relative; 
} 
#img1:hover:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url("../svg/stroke-ears.svg") no-repeat; 
} 

Что вы делаете, создавая псевдо-элемент для наложения поверх img. Ваш оригинал img имел фон, примененный к фону img, в отличие от его наложения.

Это новое решение создает элемент вне обычного DOM, который будет обрабатывать ваш img в качестве контейнера и покрывать все его размеры элементом, который имеет исходный фон, который вы хотели применить.

Update

JSFiddle example

Итак, глупый меня, пытаясь лечить img S как содержащие элементы. Вот исправление.

HTML

<div class="inline-container centering margin-on-top"> 
    <div class='img-holder'> 
     <img id="img1" src="http://placehold.it/200x200" /> 
    </div> 
    <div class='img-holder'> 
     <img id="img2" src="http://placehold.it/200x200/FBC93D" /> 
    </div> 
    <div class='img-holder'> 
     <img id="img3" src="http://placehold.it/200x200/075883" /> 
    </div> 
</div> 

CSS

.inline-container { 
    font-size: 0; 
} 
.img-holder { 
    position: relative; 
    display: inline-block; 
} 
.img-holder:hover:after { 
    content: ''; 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    background: url("http://placeskull.com/200/200") no-repeat; 
} 

Вы можете легко поменять местами изображения быть фоновые изображения на новом DIV тоже, если вы хотите, чтобы сократить ваш HTML.