将鼠标悬停在图像上时如何放大图像？

Question

I want to show the thumbnail image large when hover over it, similar to the one in

http://www.freelayouts.com/websites/html-templates Plz help. Any help will be appreciated.

Answer 1

What you need is a tooltip plugin. There are plenty of them. Check out this list: 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

Take a look at http://fancybox.net/blog

Fancybox looks nice, uses JQuery and is highly configurable with various show/hide effects. Tutorial number 3 on this page shows you how to use it OnHover rather than OnClick

The home page http://fancybox.net/home shows some examples of the visual effect

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

The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.