Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Relocator.js : jQuery plugin to create Photo Gallery

    Relocator.js : jQuery plugin to create Photo Gallery

    Relocator is lightweight jQuery plugin to create photo gallery. this plugin will make the different size images to fit with the specified canvas without “size resizing”.

    Features:

    • Plugin will resize the image and fit within the given canvas without “size resizing”
    • Also provide extra feature like show the title and animate the image description on mouse hover.

    Smart Image Tooltip with jQuery & CSS

    Smart Image Tooltip with jQuery & CSS

    Smart Image Tooltip is easy to use and setup plugin that can show images as tooltips for thumbnails or normal links. Plugin requires proper structure for the HTML used, and it supports adding all sorts of extra data that can be displayed inside the tooltip. Tooltip can be styled using CSS and it supports template for rendering. Plugin supports mobile/touch based devices to open tooltip on hover or click depending on the device or the plugin settings. There are many other settings to control plugin available.

    Features:

    • Preload image before displaying tooltip
    • Customizable preload animation and reposition tooltip
    • Various demos and examples to show how menu can be set
    • Full source files for both CSS and jQuery
    • Minimized CSS and JS files

    Blueprint : Responsive Icon Grid with CSS3

    Blueprint : Responsive Icon Grid with CSS3

    A responsive grid of anchors with icons, text and some example hover transitions.A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.

    I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.

    Caption Hover Effects with CSS3 & JS

    Caption Hover Effects with CSS3 & JS

    Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

    HCaptions.js : jQuery Hover Captions plugin with Cool effects

    HCaptions.js : jQuery Hover Captions plugin with Cool effects

    Hover Captions (here in after: HCaptions) is a jQuery plugin that enables you to display caption overlays with cool effects over images, div’s, ect..

    Display Product Information on a Hover over Thumbnails using jQuery

    Display Product Information on a Hover over Thumbnails using jQuery

    Product List – This could be your portfolio list, product list, image list, etc.  Listing your products with displaying information when hovering thumbnails is useful when selling your products online. I am going to share a simple jQuery code & CSS code to achieve this trick.

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

    Features:

    • Ready to Responsive and Adaptive
    • Simple to use
    • Cross Browsers
    • Allow multiple connections
    • Auto Size(on/off)
    • Inhirit Padding(on/off)
    • Supports thirty animation effects from jQuery Easing
    • Overlay Style: classic,rolling(top,bottom,right,left),double(vertical,horizontal),four

    Slickhover.js : jQuery Slick and Smooth hover effect plugin

    Slickhover.js : jQuery Slick and Smooth hover effect plugin

    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. All you have to do is call it on an image selector.

    jQuery Hotspot Plugin with Slideshow

    jQuery Hotspot Plugin with Slideshow

    You can use this jQuery Hotspot Plugin in a product introduction or image showcase, which support the auto delay slideshow and can trigger by click or hover. Works fine in the mobile device like iPhone or iPad too.

    Features:

    • Auto delay slideshow, hover to pause.
    • Trigger by click or hover.
    • 4 types of popovers with different animation.
    • CSS3 transition support in the modern browser, fade only in the old browsers.
    • Chainable, works fine with other plugin.
    • The source js and layered png files, FAQ are all included in the source package.
    • Modernizr CSS3 feature detection.