Home » jQuery12 February 2010

jQuery: Preview Image with Zoom Effect

Here, I will show you how to preview Image with Zoom effect. I mean, you will be able to preview large image when you hover the thumbnail image. The image is zoomed when hovered.

View Demo || Download Code

As you can see below, I have kept the large image link in the alt tag. The description/caption for the image is kept in rel tag.

When the mouse is hovered over the image, I just have switched the src and alt tag’s value. Then the width of the image is increased by 30% with the animate function. Everything is brought back to normal (default state) when the cursor is taken away from the image.

The source of the image is changed before zoom, so that it is not blurred when zoomed with larged width.

Here’s the full source code:

View Demo || Download Code

Thanks.

jQuery

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Nice work mukesh… but if one image hovered twice.. it repeats effect. Its not okey.. how to fix it?

  • I’ve put stop before animate:

    $(this).stop().animate({width: “30%”},1000);

    $(this).stop().animate({width: oldWidth},1000);

    Nice idea, thx for sharing
    Greetz

  • Bil0313

    yeah thats true..did u find a solution for it????

  • Masterikhwan

    Nice post… How to implement code above to wordpress.. please help me :-)