CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rajasekar
Rajasekar

Reputation: 18978

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.freelayouts.com/websites/html-templates Plz help. Any help will be appreciated.

Upvotes: 0

Views: 30368

Answers (4)

mre
mre

Reputation: 1883

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

Upvotes: 3

Charles
Charles

Reputation: 330

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

Upvotes: 0

Tom&#225;s
Tom&#225;s

Reputation: 3561

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

...

And on the css:

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

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

Upvotes: 2

Nick Allen
Nick Allen

Reputation: 12230

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

Upvotes: 0

Related Questions