Как применить эффект hover на картинку так, чтобы при наведении картинка менялась на другую картинку?
Есть пару вариантов:
1) Сделать картинку бекграундом, и менять его при наведении.
2) Положить в контейнер обе картинки
<div class="image">
 <img class="img">
 <img class="hoverImg">
</div>
.image .hoverImg {
 display: none;
}
.image:hover .img {
 display: none
}
.image:hover .hoverImg {
 display: block
}
3) Использовать data атрибут с hover картинкой, и обрабатывать события mouseover, mouseout при помощи JS, с подменой атрибута src из вашего data атрибута при событии mouseover

И наверное ещё несколько вариантов можно придумать ;)
background это анимируемое свойство css, можно без скриптов даже

snippet