Hover Image Zoom With JQuery

June 11th, 2011 by aditia rahman / 55 Comments  

     

In today I create a little code snippet in JQuery, this time is about zooming hovered image, this kind of feature might be fit for a web gallery site which have many content, to giving a little quick preview about the item.

JQuery Image Zoom Hover

Here the code, not really much to say, just playing little with jquery animate function and some CSS property such as top, left, width and height.

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                width: "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });

        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>
    <style type="text/css">
        #container {
            text-align: center;
            position: absolute;
            left: 260px;
            margin-top: 150px;
            width: 790px;
        }
        .img {
            position: fixed;
            z-index: 0;
        }
        .end {
            margin-right: 0;
        }
        .clear {
            clear: both;
        }
        .img a img {
            position: relative;
            border: 0 solid #fff;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="img"><a href="#"><img src="img/1.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/2.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/4.jpg"/></a></div>
        <div class="img end"><a href="#"><img src="img/5.jpg"/></a></div>
        <div class="clear"></div>
    </div>
</body>
</html>

I’m using 5 images here, the zoom in effect triggered when the mouse is hover in, and vice versa. We need to manipulate the top and left in animating to make the zoom effect looks tidy, and this how to measure the movement number, let say your images 100px x 100px and zoomed to 200px x 200px, which mean you have to make the top and left reduced by 50px (200px – 100px) / 2 when the zoomin triggered, easy right, and that’s all.

Demo Download

JQuery Image Zoom Hover

stock photos by flickr architecture group

        submit to reddit Delicious

55 Comments Leave a Comment Subscribe RSS

  • Chirant says:

    Very neat and clean, thumbs up!

  • Peter says:

    Nice tutorial and neat code. Just one question-how would it work with images of different sizes (width, height)?

  • brian steel says:

    PROBLEM: this effect applies to ALL images that link – hence every image on the site inherits this zoom effect.

    funny, i notice you only have pictures of the demo on this page (which includes images that link) – and that your demo is on a separate page that has no other elements for the script to interfere with.

    decepticon!!

  • UpWeb says:

    Useful introduce. This simple jquery code can help you show avatar or something small with more large size by hover it.

  • Luís says:

    it’s nice, but when you pass the mouse several times very quickly the animations get crazy. try put .stop(true,true) before .animate().

  • ali says:

    Would it be possible to “upload your image” option as well so that we can add our own pictures rather than editing the html file?

  • ali says:

    I have found this code, but don’t know where to put it!

  • Jhonmercy says:

    as brian steel said:

    PROBLEM: this effect applies to ALL images that link hence every image on the site inherits this zoom effect.

    funny, i notice you only have pictures of the demo on this page (which includes images that link) and that your demo is on a separate page that has no other elements for the script to interfere with.

    Will you please help me to sort out this issue..it is very important for me, please suggest me something so that i can overcome this issue.
    i am not able to find the solution for this problem
    please help me i’ll be heartly thankful to you!

  • Jhonmercy says:

    will you give me some example so that i can implement it properly.

    Thanks for replying back..

  • Rodrigo says:

    I could do everything here. All nice!
    My problem is that my page is centralized in the browser window. So I think I should change that part:
    .img { position:fixed} but this “crashes” the hover efect, since the other images are affected by the incresing size. They are pushed to right when a subsequent image is hovered.
    I’m trying to change the position of #container, but it didn’t worked too :(
    Do you have some ideas? Thanks a lot and your solution is very helpful

  • Rodrigo says:

    I changed the container to:
    #container{
    text-align: left;
    position: absolute;
    left: 18px;

    And it works when I reload the page. Now, I need to discover how to ake #container centralized. I think I will have to put it into anoter div (eg: #supercontainer) and make that div be centralized, What do you think?

  • Cool says:

    hi…

    U have to change in the script… no need to change in css…

  • Ikhwan says:

    Nice tutorial I need. How to implement this code to blogger or wordpress.. thanks for appreciation… or you can email me. I will donate for your help :-)

  • sarath says:

    Perfect.. but I need to give a mask effect when mouse over the image. Can you help me to do this.

  • Great work. We are using it for a project.

    Thanks.

  • neildaemond says:

    Very nice and clean. Feels more efficient than having to load two images and then switch between them with z-index.

  • Alex says:

    Hey, really nice, was exactly what I was looking for!

    But I have a problem, i am using a image that is 50 px in a 55px wide div, and stacking the pictures on top of each other.
    The problem is when i hover over an image all the images under this image is moved down.

    Next to this div is a div with the same width and same type of images inside.
    There is no problem what so ever getting the pictures from the first div to be show over the second div, the problem only occurs with the pictures below the hovered one in the same div.

    Hope my explanation is understandable…

  • roshan says:

    How can i implement this to grid type gallery, i have change the css but once it goes to browser all the images on 1 line, how can i see it as a grid.

  • Joomla Boat says:

    For Joomla sites you can use Mouse Over Zoom is a Joomla Extension that enables you to view bigger versions of the thumbnails. Just move the mouse over thumbnails to view zoomed images with predefined zoom level (x2, x3, x4 etc), without loading a new page. You can download for free Mouse Over Zoom here http://www.joomlaboat.com or urchase Pr version with lots of different additional options.

    You can customize this plugin with a lot of additional options.

    In order to load transparent images (without background) use .png format.

  • lesponce says:

    Works great. My problem is that all images are getting the same zoom effect. I’d like to have the same pics you have on the sample not doing the zoom effect and then have a grid of pictures doing the zoom effect.

    Can you please share some code? Thx so much.

  • lesponce says:

    I got it to work. Nevermind. Thank you!!

  • ganesh says:

    wow. thanks frnd

  • kamlesh says:

    Nice one…!

  • CottonAge says:

    Hi,
    I really like this image effects so I implemented it to my eCommerce site, works like charm but one problem that I can’t figure out is that when I hover over image it zooms out but all the content under the image moves down and when it zooms in it becomes normal.

    Can anyone help me resolve this issue?

  • Asif says:

    Thanks, it was clean and it worked

  • Abhay says:

    Can i use this for my commercial use?
    Is it that I have to pay you something?

  • Abhay says:

    Can i use this for my commercial use?
    Is it that I have to pay you something?

  • goalsurfer says:

    Can you adapt it for a table with 2×2 images in stead of 4 on a row?

  • seb says:

    For multiple images in a row try this (n_row is the number of images in a row!):

    JQuery Zoom Hover

    $(document).ready(function() {
    var cont_left = $(“#container”).position().left;
    var cont_top = $(“#container”).position().top;
    var n_row = 4;
    $(“.zoom a img”).hover(function() {
    // hover in
    $(this).parent().parent().css(“z-index”, 1);
    $(this).animate({
    height: “250″,
    width: “250″,
    left: “-=50″,
    top: “-=50″
    }, “fast”);
    }, function() {
    // hover out
    $(this).parent().parent().css(“z-index”, 0);
    $(this).animate({
    height: “150″,
    width: “150″,
    left: “+=50″,
    top: “+=50″
    }, “fast”);
    });

    $(“.zoom”).each(function(index) {
    var row = parseInt(index/n_row);
    var left = ((index – row * n_row )* 160) + cont_left;
    var top = (row * 160) + cont_top;
    $(this).css(“left”, left + “px”);
    $(this).css(“top”, top + “px”);
    alert(row);
    });
    });

    #container {
    text-align: center;
    position: absolute;
    left: 260px;
    margin-top: 150px;
    width: 790px;
    }
    .img {
    position: fixed;
    z-index: 0;
    }
    .zoom {
    position: fixed;
    z-index: 0;
    }
    .end {
    margin-right: 0;
    }
    .clear {
    clear: both;
    }
    .img a img {
    position: relative;
    border: 0 solid #fff;
    }
    .zoom a img {
    position: relative;
    border: 0 solid #fff;
    }










    • seb says:

      Sorry I was too fast with my comment. You have to comment the “alert()” in the .each() function. In this example 4 pictures are are put in a row and the following pictures are set into the next row.

  • Dean says:

    This is exactly what i was looking for to replicate the look of a Squarespace 6 index template. The only thing I need to figure out is how to get it to center with 6 rows of 4 images each. The only other tricky issue is figuring out why it is also effecting the main banner on the site. :-/

    Thanx for sharing this.

  • raji says:

    i have use gallery page in my website ( http://www.classicbazaar.com ), thanks

  • Pedro says:

    What if the images are not squares. In a way that they are, for example 40px height, 50px width. I am playing with the ratio and trying to go something like:

    var ratio = img.width / img.height;

    $(this).animate({
    height: “250px”,
    width: parseInt(ratio*250) + “px”,
    left: “-=50″,
    top: “-=50″
    }, “slow”);

    But it is not working as it always turns to a 250 x 250 picture. Any clue?

    Thanks

  • akmwebtech says:

    thanks for that why you cannot create a zooming image gallery

  • bro klo cara install di wordpress gmn yah ?

    makasih sbelumnya :)

  • h94 says:

    $(document).ready(function () {

    $(“img”).load(function () {
    $(this).data(“height”, this.height);
    }).bind(“mouseenter mouseleave”, function (e) {
    $(this).stop().animate({
    height: $(this).data(“height”) * (e.type === “mouseenter” ? 1.5 : 1)
    });
    });

    });

    Seems like an easier solution.

  • Chris says:

    My images start off full size and then shrink to the desired size upon first hover and then zomm in and out as designed.

    What’s happening here?!

  • Andi says:

    Thanks! just what i was looking for.

  • Sira says:

    hey,

    thank you! it works fine.

    i have only one problem with the z-index. it doesnt work on my file. i tried to set the img, div img, and div div img z-index on 0 and the z-index in the function on 100
    – thought that would be sure to 100% –
    but my hover image doesnt show on the top.

    maybe you have some advices for me?

    greetings s.

  • scott says:

    Very cool script!

    Is there any way to force all of the zoomed images to display only in a certain position, rather than starting from where the original image was positioned?

    For example, when I move my mouse over the left image, I want it to start the zoom from absolute position 0,0. I also want the right most image to zoom starting from the same absolute position of 0,0.

Leave a Comment