Изображение поверх изображения при наведении мыши

Question

Я смотрю, как сделать что-то похожее на эту страницу: http://www.gap.com/browse/category.do?cid=15043

При наведении курсора на рубашку отображается изображение Беглого взгляда. Я не могу понять, как показать изображение при наведении мыши. Сложность в том, что вы все еще можете нажать на рубашку, и тогда вы попадете на страницу продукта. Если вы нажмете на изображение Quick Look, вы попадете в модальное окно. У меня есть модальное окно, работающее так, как я хочу, я просто не знаю, как отобразить изображение типа Quick Look поверх основного изображения продукта при наведении мыши.

Любая помощь будет оценена! Спасибо!

Answer 1

Вы можете использовать CSS для этого. Я использую div в этом примере, но изображение также должно работать: Живой пример

HTML

<a href="#"><div class="img">info here</div></a>

CSS

a{
    display:block;
    background-color:#666;
    width:100px;
    height:100px;
}

a div.img{
    display:none;
}

a:hover div.img{
    display:block;
}

Answer 2

Лучший способ сделать это - использовать jquery для создания события onmouseover, которое меняет ссылку на изображение на новую ссылку, а затем создать событие onmouseout, которое возвращает исходную ссылку на изображение на место