Добавьте на странице div такого же размера как и и изображение. Для этого блока разместите фоном вторую картинку (она будет перекрыта другим изображением). В блок поместите первую картинку:

1
2
3
<div id="kitten">
   <img src="/images/kitten.jpg" alt="Kitten" />
</div>

При наведение курсора на блок мы будем менять прозрачность первого изображения, показывая/пряча фоновую картинку.

1
2
3
4
5
$("#kitten").hover(function(){
   $(this).find("img").fadeOut();
}, function() {
   $(this).find("img").fadeIn();
});

источник: css-tricks.com

Оставьте свой комментарий