Изображение облегчается при наведении мыши на ссылку

Question

Во-первых, я относительно новичок в JavaScript / jQuery.

Я хочу добиться с помощью JavaScript или jQuery эффекта, который при наведении курсора мыши на ссылку "облегчает" область содержимого и становится видимым,После удаления изображения изображение исчезнет.Я искал такую ​​технику / эффект, но безуспешно.

Изображение будет проходить по всей области содержимого, покрывая фоновое изображение.Ссылки находятся в той же области содержимого и все еще будут видны над изображением, что, как я думаю, можно сделать с помощью z-индекса.Когда я наведу курсор мыши на следующую ссылку, появится следующее изображение.Всего будет три изображения.

Любая помощь, руководство или указание к учебнику, которое делает именно это, будет с благодарностью.

Answer 1

Этого можно легко добиться с помощью jQuery, используя метод .hover(), который принимает обработчики для наведения мыши и наведения мыши, а также метод .animate() для измененияНепрозрачность содержащегося изображения:

$('.easer').hover(function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'1'});
},function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'0'});
});

См. пример выше здесь.