Look Inside
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
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.
Pretty Hover Effects with jQuery and CSS
by Fearlessflyer
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!
Hover Zoom Effect with jQuery and CSS
by Matt Bango
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.
Greyscale Hover Effect with jQuery and CSS
by Soh Tanaka
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.
Swish jQuery Zoom Hover Effect
by Daryl Ginn
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!
jQuery Image Slide Hover Effect
by brobison
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.
Image Cross Fade Transition with jQuery and CSS
by Remy Sharp
Simple but creative way to use jQuery hover fades effect for your images.
jQuery Animated Hover Effect
by?Timothy van Sas
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.
jquery Captify for Image Caption
by Brian Reavis
Here’s another simple but pretty jQuery hover effect you can use to display image caption on rollover.
jQuery Drop Captions Effect
by Catch My Fame
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.
Animated Image Caption with jQuery
by Emanuel Kluge
Maybe you should try this jQuery image hover effect for your site and blog as well.
Thumbnail with Fading Caption Using jQuery
by Queness
Last but not least, another thumbnail hover effect with fading and transparent caption for you!
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!