12 jQuery Image Hover Effects examples and plugins

by Kenny on
jQuery image hover effects can make your website looks dynamic and feel more alive. It can style your images as well as image caption nicely

Look Inside

jQuery Image Hover Effects screenshot Sometimes when you visited a website or blog, especially on those Flash based websites, you’ll see a really nifty and beautiful image hover effects when mouseover their galleries. Feel admired? Want something similar to your site? With the power of jQuery, you can achieve the same results as them without using any Flash.

Image Hover effects can make your website looks dynamic and feel more alive. It is not only can styling your images nicely, but also help you allocate your image caption in better away.?In the following post, I would like to show you 13 awesome jQuery image hover effects examples and plugins that can be integrated into your website and blogs. Or perhaps, it could be a reference for your next project. Enjoy!

Fancy Thumbnail Hover Effect with Jquery and CSS

by Soh Tanaka

Fancy Thumbnail Hover Effect
Fancy Thumbnail Hover Effect

A very nice and FANCY zoomed thumbnail hover effect with jQuery and CSS that imitate the effect of Flash galleries. The thumbnail will be zoomed when hover over and back to normal when hover out.

Demo Source

Pretty Hover Effects with jQuery and CSS

by Fearlessflyer

Pretty Hover Effects
Pretty Hover Effects

How do you normally handle your image caption? By displaying below your image itself? Perhaps you should try this jQuery hover effect which helps you display your image caption in really creative and UNIQUE ways!

Demo Source

Hover Zoom Effect with jQuery and CSS

by Matt Bango

Hover Zoom Effect
Hover Zoom Effect

As self-explanatory, this jQuery hover effect will reverse zooms the image while fading in a caption on top of it when hover over. It makes for a pretty slick effect which could be used on thumbnail.

Demo Source

Greyscale Hover Effect with jQuery and CSS

by Soh Tanaka

Greyscale Hover Effect
Greyscale Hover Effect

Applying grayscale effect to thumbnails and images when hover over. Unfortunately, to make it work you have to prepare 2 set of images, color and grayscale. But the final results look amazing.

Demo Source

Swish jQuery Zoom Hover Effect

by Daryl Ginn

Swish jQuery Zoom Hover Effect
Swish jQuery Zoom Hover Effect

With this plugin you can add a zoom effect to your images when hover over while add an overlay on top of it. It’s really simple to setup!

Demo Source

jQuery Image Slide Hover Effect

by brobison

jQuery Image Slide Hover Effect
jQuery Image Slide Hover Effect

This image hover effect is created by using jQuery animate effect and supports 2 kinds of slide effects, which are horizontal sliding and vertical sliding.

Demo Source

Image Cross Fade Transition with jQuery and CSS

by Remy Sharp

Image Cross Fade Transition
Image Cross Fade Transition

Simple but creative way to use jQuery hover fades effect for your images.

Demo Source

jQuery Animated Hover Effect

by?Timothy van Sas

jQuery Animated Hover Effect
jQuery Animated Hover Effect

Hiding your image caption behind your images and reveal it when hover over. This is pretty simple jQuery hover effect but with nice and smooth effect.

Demo Source

jquery Captify for Image Caption

by Brian Reavis

jQuery Captify for Image Caption
jQuery Captify for Image Caption

Here’s another simple but pretty jQuery hover effect you can use to display image caption on rollover.

Demo Source

jQuery Drop Captions Effect

by Catch My Fame

jQuery Drop Captions Effect
jQuery Drop Captions Effect

Once again jQuery image hover effect with caption. It takes an image’s title and converts it into caption that appears only when hover over the image.

Demo Source

Animated Image Caption with jQuery

by Emanuel Kluge

Animated Image Caption
Animated Image Caption

Maybe you should try this jQuery image hover effect for your site and blog as well.

Demo Source

Thumbnail with Fading Caption Using jQuery

by Queness

Thumbnail with Fading Caption
Thumbnail with Fading Caption

Last but not least, another thumbnail hover effect with fading and transparent caption for you!

Demo Source

Conclusion

That’s all. Hope this gives you an idea on how to empower your website with these jQuery image hover effects. If you have difficulty in matching these effects with your website or you want something else different, why not just create your own style? It’s pretty simple with help of jQuery .hover() function. Or you want to have pure CSS3 Fancy Hover Effect in your web page? Anyway, good luck and have fun with this!

Don't enjoy alone, share with your friends also
Read Next

13 simple jQuery Menu and Navigation Plugins for Websites