StartGames,
Это:
onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'"
ты можешь заменить на:
onmouseover="this.src='{{ product.thumb2 }}'"
или вообще на:
onmouseover="src='{{ product.thumb2 }}'"
А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.
Можно по-быстрому изобразить что-то такое из двух картинок если у них одинаковые размеры, но придётся поверстать если случай не самый простой:
<body>
--
<img
width="100"
height="100"
class="img-responsive ani img-bottom"
src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
/><img
width="100"
height="100"
class="img-responsive ani img-top"
src="https://javascript.ru/forum/image.php?u=4993&dateline=1299014303"
/>
--
<style>
.img-bottom {
position:absolute;
z-index: -1;
}
.img-top {
opacity: 0;
transition: 1s opacity;
}
.img-top:hover {
opacity: 1;
}
</style>
</body>