Как увеличить изображение при наведении на изображение?

Question

Я хочу показать увеличенное изображение миниатюры при наведении на него, аналогично тому, как в

http://www.freelayouts.com/websites/html-templates Справка Plz. Любая помощь будет оценена.

Answer 1

Что вам нужно, это подсказка плагин. Их много. Проверьте этот список: https://cssauthor.com/jquery-css3-hover-effects/

Answer 2

Посмотрите на http://fancybox.net/blog

FancyBox выглядит красиво, использует JQuery и легко настраивается с различными шоу/скрыть эффекты. Учебное пособие номер 3 на этой странице показано, как использовать его OnHover вместо OnClick

Домашняя страница http://fancybox.net/home показывает некоторые примеры визуального эффекта

Answer 3

<img class="enlarge-onhover" src="img.jpg"> 

... 

And on the css: 

.enlarge-onhover { 
    width: 30px; 
    height: 30px; 
} 

.enlarge-onhover:hover { 
    width: 70px; 
    height: 70px; 
} 

Answer 4

<script> 
function bigImg(x) { 
    x.style.height = "64px"; 
    x.style.width = "64px"; 
} 

function normalImg(x) { 
    x.style.height = "32px"; 
    x.style.width = "32px"; 
} 
</script> 

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> 

Функция bigImg() срабатывает, когда пользователь мыши на изображение. Эта функция увеличивает изображение.

Функция normalImg() запускается, когда указатель мыши перемещается из изображения. Эта функция устанавливает высоту и ширину изображения в нормальное состояние.