Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

Subscribe
Options
About tfbox
Share

Swish jQuery Zoom Hover Effect Plugin Freebie

Loading...
37
25226
Swish jQuery Zoom Hover Effect Plugin Freebie

Grab this free easy to customize jQuery Zoom Hover Effect plugin and spice up your portfolio or website and give it a great finish.

Love it? 41
15484 Downloads

Todays freebie is a swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s. Maybe even code up yesterday’s freebie and incorporate it with that for a real nice finish?

What the plugin does:

With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). You can also adjust all the settings it comes with (refer to usage in the index.html header). It’s really simple to setup, if you get into any trouble with it do let me know and I’ll do my best to help you out.

Image Credits:

The image’s are provided courtesy of Sheena Aw. Make sure you check out her work, she really is a fantastic illustrator and is also part of the well known Depthcore Creative Artists.

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

  • http://twitter.com/proxdeveloper Pablo Fierro

    Hey man, great site! when will other authors be contributing ?

  • Anonymous

    Hmm, when I get some really, I have a few people lined up. But right now it’s just me haha. I don’t mind too much, I enjoy it as it is.

  • Inspirationfeed

    Well done, great job!

  • http://webdesign.populoo.com/2011/05/09/httpthefinishedbox-comfreebiespluginsjquery-zoom-plugin/ http://thefinishedbox.com/freebies/plugins/jquery-zoom-plugin » Web Design
  • Anonymous

    Thanks buddy.

  • http://www.facebook.com/profile.php?id=512423576 Paul Whitehead

    nice….

  • Softpedia

    Is it ok if your scripts are indexed on Softedia Webscripts?

  • Softpedia

    *Softpedia Webscripts http://webscripts.softpedia.com

  • Anonymous

    Thanks for putting up the demo
    http://extreme-java.blogspot.com

  • http://blog.ingetaku.com/swish-%e2%80%93-zoom-hover-effect-plugin-for-jquery.html Swish – Zoom Hover Effect Plugin For jQuery

    [...] Swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s. With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). This plugin is easy to customized. You can adjust all the settings it comes with that you can find on refer to usage page in the index.html header. [...]

  • http://webdesigncrowd.com/jquery-weekly-roundup-4/ jQuery Weekly Roundup #4: 5/11/11 – webdesigncrowd.com

    [...] Swish Zoom jQuery Hover Effect — View Demo [...]

  • http://webdev.bambytop.com/2011/05/swish-%e2%80%93-zoom-hover-effect-plugin-for-jquery/ Swish – Zoom Hover Effect Plugin For jQuery | Web Dev World

    [...] Swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s. With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). This plugin is easy to customized. You can adjust all the settings it comes with that you can find on refer to usage page in the index.html header. [...]

  • Anonymous

    Possibly, would you like to tell me more about it?

  • http://facility-war3z.blogspot.com/ Facility-Warez

    Muchas gracias, te quedo muy bueno, felicidades amigo, y saludos desde Colombia :D

  • http://vncommer.com/?p=809 10 Useful jQuery Plugins For Designers | Technical

    [...] Swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s. With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). [...]

  • Struanhogg

    I cant get this to work in IE – any toughts??????

  • Struanhogg

    I cant get this to work in IE – any toughts??????

  • Anonymous

    Looks great
    how do you link these as buttons?

  • Pizzapie

    That’s surely a nice effect, but I find a little problem with IE (IE 8.0) and opera…
    Sometimes the image is not showing, and the loading gif doesn’t disappear, until I refresh page…

    Any idea on how to fix this?

  • Pizzapie

    Ok, let me try to be more specific:
    by ispecting the page, I noticed that sometimes the script fails appending the “”, but I can’t understand why :-|

  • http://www.facebook.com/gavinthebarbarian Gavin Wood

    I have a problem with this plugin. if you apply he same id to lets say a gallery on which you want this effect ot work, it only works on the very first item and the others are left with loading gif?

    how do i get the same color overlay to work on all the thumbnails in a gallery?

    thanks a mill

  • http://www.facebook.com/gavinthebarbarian Gavin Wood

    Is anyone going to answer why this plugin is not working in IE?
    there have been a couple of people asking about this issue but nobody is helping with a resolve?

    Please could you get back to us regarding this problem??

  • Scotto_27

    scott-obrien.com says thanks

  • Mephist0222

    How do I change the magnifying glass icon? I would like to use 2 buttons on top.

  • Ollie Clark

    Would also like an answer to Gavin’s question, I’m having the same problem.

  • Craig

    This doesn’t work in Internet Explorer, going to have to find another solution unfortunately as I did like this plugin. Wish I would have read all the other comments first :(

  • http://mintik.com/ mintik

    Very nice example. Thanks.

  • Dani

    i’m with the same problem

  • Em Puk

    This is a really cool effect, but as others here mention – super frustrating that it doesn’t seem to work in IE. Only get the animated gif most of the time. Wish there was a fix!!

  • excore

    i have a some problem, but i fixed it. Replace the ‘#blue’ string with ‘.zoom’ and in the image:

    $(‘.zoom’).hoverZoom({
    overlayColor:’#333333′,
    overlayOpacity: 0.2,
    zoom: 25
    });

  • Chan Ku

    I’m a newbie of Jquery and just start study. So I tried to modify this code to be work with all browser. this is my mod.

    https://drive.google.com/file/d/0B7Ai0rpF4kRdeldTT0hzcnh0Vzg/edit?usp=sharing

    All you can load and use it, I added something (Slide feature and caption from my project) to this zip.

    1. if you want to use caption, add “captionup” in
    2. if you want to use slideup/slideleft, define “action: ‘slideup’” in option (html)

    To all may confuse, I will try to help you BUT I’m NOT promise.

    This version is not warranty any bug of failure may occur and It’s free for all to modify and change.

    Thanks all tutorials on google, I own you.

  • http://www.jquery4u.net/5-jquery-image-hoverclickscroll-plugins/ 5 jQuery Image Hover/Click/Scroll Plugins | jQuery4U | No.1 Resource for jQuery Developers

    [...] With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). SourceDemo [...]

  • http://www.freewebtutorials.info/250-jquery-css3-hover-effects-plugins-tutorials/ 250+ JQuery & CSS3 Hover Effects (Plugins & Tutorials)

    [...] Live Demo Download [...]

  • http://www.devstrend.com/50-jquery-hover-effect-plugin/ 50 JQuery Hover Effect Plugin – DevsTrend

    [...] Live Demo   Download [...]

  • http://www.devstrend.com/60-latest-web-freebies-and-resources-september-2015/ 60+ Latest Web Freebies and Resources – September 2015 – DevsTrend

    [...] Demo   Download Share this:Click to share on Twitter (Opens in new window)Share on Facebook (Opens in new [...]

  • http://helloblog.net/webdesign/jquery/5472/ Web制作に簡単に動きを実現できるHover効果などのjQuery Hover Plugin 10選 | ハローブログ Web制作・ホームページ制作の情報ブログ

    [...] Swish jQuery Zoom Hover Effect Plugin Freebie [...]

  • http://www.cssauthor.com/jquery-css3-hover-effects/ 250+ jQuery & CSS3 Hover Effects (Plugins & Tutorials)

    [...] plugin which you can use to add a great effect to things such as portfolio item’s. Live Demo DownloadAnythingZoomer jQuery PluginYou have a small area. You mouse over it. An area pops up giving you a [...]

blog comments powered by Disqus