How to enlarge image while hover over an image?

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

http://www.f开发者_如何学运维reelayouts.com/websites/html-templates Plz help. Any help will be appreciated.

---

What you need is a tooltip plugin. There are plenty of them. Check out this list: https://cssauthor.com/jquery-css3-hover-effects/

---

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

...

And on the css:

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

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

---

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

---

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