Jquery Image popout on hover

Question

I was wondering how would one do this transition effect in jQuery -

I have an image, when I hover over it with my mouse, the image slightly transitions out (enlarges in size) & when I hover out of the image it falls back to its original size.

This behaviour is just like what we see in Google Images

Answer 1

Check out the below links -

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

http://justinfarmer.com/?p=31

You can google out for more of them.

Answer 2

I'm not sure about jQuery, but you can use CSS3 transitions. CSS3 transitions don't work in every browser, but if you want to have fun in FF and Webkit...

Assuming your images are wrapped in <a> tags (Edit: Example @ http://jsfiddle.net/Kai/x4Frn/):

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}