Friday, 28 December 2012

Hover-Zoom 3.0 - in place image zoom on mouse hover with transparency effect

Check out Hover-Zoom Extended -- new version!

This Jquery plugin
- displays a your images in full size when the mouse hovers over them.
- also works with dynamically created images.
- press "Ctrl+b" or just "b" to enable or disable it on your web page.
- check out the transparecy feature of the hover-zoom'ed image!
Just include this plugin and all images in your webpage will have the Hover-Zoom effect.

How to use:

The download pack contains two files - hover_zoom.html and the plugin file hover_zoom_v3.min.js.

1. Include the plugin

Include the JS file in the <head> section of your webpage and you're done!
All <img> tags will have the Hover-Zoom effect.

Press Ctrl+b or just b to toggle the hover-zoom effect on your webpage.
Let me know if you face any issues.


  1. Now this is something !!! ...... :)

  2. It's a nice and working properly. Nice to use it. Just downloaded it for use in my new projects.

  3. I have been looking a long time for something like this. Thank you

  4. wow super! big thanks! but only one problem text at the bottom of image off-center. how i can fix it and translate text into another language?

    1. hi,
      can you please try the latest version of this plugin ...
      "Hover Zoom Extended"

      About the language feature, let me get back to you on that!

  5. You're script is great!

    Just one thing there a way to avoid the script from working on my logo at the top of my page?


    1. I used my logo as a BG so it's all good now!
      Thanks again!

  6. Hi I require some images are excluded from the zoom

  7. thank you so much for these tips, the hover zoom is tough.