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

Question

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

http://www.freelayouts.com/websites/html-templates Пожалуйста, помогите. Любая помощь будет оценена.

Answer 1

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

Answer 2

<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 3

<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() запускается, когда указатель мыши перемещается за пределы изображения. Эта функция возвращает высоту и ширину изображения в нормальное состояние.

Answer 4

Взгляните на http://fancybox.net/blog

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

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