19 Cool jQuery Image Hover Plugins

Here are 16 jQuery image hover plugins that enable you to display everything you need with cool effects over images using css3 and html5.

SlipHover

Apply direction aware 2D/3D hover animation to images or any other elements.

sliphover

Hover Zoom Effect

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. As always, you can check out a demo or grab the source right here if you don’t want to read the entire tutorial.

zoom-hover

My Fade Over Image

This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.

fadehover

Zalki

Zalki is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes.

jq-image-hover-effect-4

HoverEx

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.Just make the needs html markup,it will work well for you.

jq-image-hover-effect-5

Social Image Hover for jQuery

This plugin allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, Google Plus, Reddit, and more. Even better, the hover effects are silky smooth, cross browser, and come in multiple styles!

jq-image-hover-effect-6

jQuery Hover Cards

jQuery Hover Cards is a lightweight plugin that gives you the power to create beautiful and interactive hover effects for your images and thumbnails the differ depending on the direction the image was hovered.

jq-image-hover-effect-7

Swish

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).

jq-image-hover-effect-12

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

jq-image-hover-effect-1

Adipoli

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

jq-image-hover-effect-2

ipicture

iPicture is a jQuery Plugin to create interactive pictures with extra descriptions.

jq-image-hover-effect-3

Magnifying glass for image zoom

The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.

jq-image-hover-effect-8

Cycle Through Images on Hover with jQuery

A quick way to add a hover responsive, fast cycling, jQuery powered slideshow to your site.

jq-image-hover-effect-9

SPOILER ALERT!

Don’t spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click.

cjmrh-2

Hoverizr

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.

jq-image-hover-effect-11

jQuery CSS3 Hover Transform Plugin

A lightweight (2kb min) jQuery Plugin which handles CSS3 hover tranforms that work cross browser IE8+. Works on all modern browsers Chrome, Firefox, Safari, IE. Old browsers IE9, IE8.

jquery-hover

Slickhover.js

Slickhover.js is a lightweight useful jQuery plugin that produces a slick and smooth hover effect that fades out images and shows a custom icon when a user hovers over an image.

slickhover

PowerTip — Create hover tooltips with jQuery

PowerTip is a jQuery tooltip plugin with a flexible design that’s easy to customize. Implementation is straightforward and is easy to customize, has smooth fade-ins and fade-outs, and even gives you a number of different ways you can use those tooltips (including complex content).

power-tip

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.