Как осуществить данный hover эффект?

Question

[NoNIDs]

Как можно осуществить данный на картинке hover эффект при наведении на картинку, одна сдвигается вверх и влево на пару пикселей + на месте картинки должен остаться bg голубоватого цвета. В общем, все показано на картинке, буду очень благодарен)

Answer 1

[Антон Спирин]

Подобные анимации реализуют с помощью :hover + transition.
https://codepen.io/vincebrown/pen/bNNpmY
https://codepen.io/nathanlong/pen/MwOpxj
https://codepen.io/caesura/pen/EZpNjw
https://codepen.io/tonrudny/pen/KgaZoY

Answer 2

[Exploding]

img{
   transition: 300ms;
}
img:hover{
   transform: translate(-10px,-10px);
   box-shadow: 10px 10px 0 0 #93E1D7;
}

Comments

[NoNIDs]

Спасибо большое) А почему не работает наложение градиента?
background: linear-gradient(to top, #f38181, #fce38a);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f38181), to(#fce38a));
background: -webkit-linear-gradient(top, #f38181, #fce38a);
background: -moz-linear-gradient(top, #f38181, #fce38a);
background: -o-linear-gradient(top, #f38181, #fce38a);
background: -ms-linear-gradient(top, #f38181, #fce38a);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f38181', endColorstr='#fce38a', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f38181',endColorstr='#fce38a')";

[Exploding]

NoNIDs, зачем столько... вполне хватит и одного раза:

background: linear-gradient(to top, #f38181, #fce38a);

Работает все. Видимо где-то у вас переопределяется это свойство.
Так чтоб не искать - можете попробовать:

background: linear-gradient(to top, #f38181, #fce38a)!important;

Но это плохая практика, лучше найти переопределение.
В хроме F12, выбираете элемент нужный, и жмете на вкладку Computed, и там уже разберетесь что к чему:)