jQuery Image Hover Effects screenshot

12 jQuery Image Hover Effects examples and plugins

Written by Kenny on November 20, 2011 jQuery
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

12 jQuery Image Hover Effects examples and plugins

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!


» This Might Interest You «

User Feedbacks (13) Share Your!

  • If your looking for a jquery image hover plugin for WordPress please check this out:

    wpvisualslideboxbuilder.com/jquery-image-slider-for-wordpress/

    4 months ago! Reply
  • If your looking for a jquery image hover plugin for WordPress please check this out:

    wpvisualslideboxbuilder.com/jquery-image-slider-for-wordpress/

    4 months ago! Reply
  • bob

    FYI: Half the links on this page are broken. Very few demos available.

    2 years ago! Reply
    • Ashish

      Yup, I really need the on hover zoom.

      2 years ago! Reply
  • thank alot, ill try it, and thank’s for sharing,

    2 years ago! Reply
  • cool beans! Ima using the caption behind the image effect! really good, when modified a bit :)

    2 years ago! Reply
  • thanks man i wil definitely use some of these jquery effects in my blog. keep up the good work :D

    2 years ago! Reply
  • Awesome collection, these are exactly what I was looking for and more. This will save me time while giving my website a facelift ;)

    2 years ago! Reply
  • SKyler

    What’s up with the 5th one down going to hubub site? That is the one I want and It’s all jacked.

    2 years ago! Reply
  • Great share mate. I was looking for a WordPress Plugin on fade in and fade out effect but I am not getting a desired plugin but from the above demo source code I will try to work with. Thanks a lot for Posting this helpful article.
    ~Debasis :)

    3 years ago! Reply
  • thanks a lot. i was looking for this.

    3 years ago! Reply
  • Sky

    Wow… nice collection of jquery image hover effects! I have used one of them for my website. Thanks for sharing… keep it up dude!

    3 years ago! Reply
  • Thanks a lot for that image effects collection.
    Too bad the nicest don’t work the same with IE, though.

    3 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>