jquery image resize transition onMouseOver

Question

Hello, just wondering if there is any jquery plugin that when your mouse is over an image, this image will increase in size and if your mouse is out of the image it'll decrease in size all this as a smooth transition. thanks!

Answer 1

You could try the Zoomer gallery plugin, or roll your own based on this tutorial. Personally I would go the tutorial route since it'll give you more control over the result (and you'll learn something to boot ;)

Answer 2

If you just want one image you can use jQuery's UI effects. Note this is separate from the base jQuery - add this below your call of jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;

Now that you've added a link to the UI we can use its effect library like so:

script:

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

html:

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

Just remember that when you scale something up you need to figure out how to scale back down since the new size will be 100%. In my code we double it (200%), then reduce it by half (50%) to get back to the original. Feel free to play with the transition time, and any callbacks you might need to get it perfect.

Link to the jQuery .hover() and to jQuery UI effects