Вставить изображение в анимацию Форма сердца

Question

У меня проблема с формой сердцебиения, где я хочу добавить изображение внутри формы и ширины 100%, но изображение идет за формой.

https://jsfiddle.net/pphewde8/

<div class="heart"> 
    <img src="http://placekitten.com/240/240"> 
    <span class="left" ></span> 
    <span class="right"></span> 
</div> 

Answer 1

Вам нужен Z-индекс к изображению, чтобы привести его выше сердца слоя. Чтобы подтолкнуть котенка на место в сердце, установите требуемые свойства слева и сверху. Поскольку изображение вырывается из сердца, вы можете масштабировать его так, чтобы оно соответствовало, с преобразованием: scale(). Собираем все вместе, у вас есть:

img { 
    left: 70px; 
    position: relative; 
    top: 10px; 
    transform: scale(0.75); 
    z-index: 1; 
}