Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Zoome : jQuery Image Zoom Effect Plugin

    Zoome : jQuery Image Zoom Effect Plugin

    Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel.

    Features:

    • Zoom with hover effects(blur,grayscale,transparent)
    • Cross browser
    • Control zoom with mousewheel
    • Easy to zoom range and the step num
    • Flexible options

    HoverEx : jQuery image hover animation plugin

    HoverEx : jQuery image hover animation plugin

    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.

    Features:

    • Over 36 animations
    • Over 18 build-in templates
    • Responsive able
    • Easy to customize
    • Include two version
    • Build in 8 animate queue,and you can customize easy
    • Inline Zoom Support. Can be set the zoom range and zoom change step.And mousewheel control support.
    • Image Slider Support. Support mousewheel control,and pre/next buttons

    Swish jQuery Zoom Hover Effect Plugin

    Swish jQuery Zoom Hover Effect Plugin

    Todays freebie is a swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s.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).

    Kort : CSS 3D thumbnail preview concept with JavaScript

    Kort : CSS 3D thumbnail preview concept with JavaScript

    A thumbnail preview concept. Hover over the thumbnails, or touch and swipe if you’re on a touch device.

    Roundbox : jQuery modal image plugin

    Roundbox : jQuery modal image plugin

    Roundbox is a jQuery plugin to improve your image presentations on your sites. It comes with a cute effect when the user hovers upon the image and you can expand it with a simple and clean modal box without take the user away from your homepage.

    Features:

    • HTML5 and CSS3 crossbrowser support
    • Perfect hover detection
    • Builtin simple ModalBox
    • Lighbox support
    • Useful callback functions
    • Fully customizable
    • Smooth animations
    • Easing effect included
    • Images shown in the preview included.

    Pretty Hover Effects with CSS and jQuery

    Pretty Hover Effects with CSS and jQuery

    This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.

    Sliding Stacked Images With jQuery

    Sliding Stacked Images With jQuery

    A sliding door effect can be used what the site offer. About a week ago I visited a site called auroraos, on the first page I see a nice sliding image gallery on the front page, it used JQuery to creating the effect, it like a vertical accordion, sliding door effect or whatever you called it.

    All the images must have the same size, in both width and height, the hovered images will shows entirely, and the others will mostly hidden.

    Picanim – jQuery image hover effect pulgin

    Picanim - jQuery image hover effect pulgin

    Picanim is jQuery plugin used to bring stylish image hover.

    Features:

    • 27+ unique hover effects
    • include: such as grayscale blur transparent fadeIn slice fold boxRandom boxRandom boxDiagional…
    • small size,just 3kb after gziped
    • cross browser
    • you can easliy config the effect with a lot of options
    • also support the img tag with a specific width or height
    • easy to use
    • can show tooltip on image
    • with mouseout reverse effect

    HoverTransitions – jQuery animated hover effects

    HoverTransitions - jQuery animated hover effects

    HoverTransitions allows you to create numerous transition animation effects for webpage elements. The effects are performed by breaking the element into smaller boxes and animating the appearance of each of them according to different patterns and effects. The effects occur when events are performed. All animations are highly customisable.

    Making an Interactive Wall of Images With jQuery

    Making an Interactive Wall of Images With jQuery

    This is a little jQuery experiment I put together, just for kicks! Here is a list of things I wanted the wall to do, and things you’ll be learning to do:

    1. Simple HTML without need for much editing
    2. Group these divs depending on the width of the page, into divs that change as you resize the window
    3. When resizing the window the image rows should change to display the maximum number of images, so it’ll work on the maximum number of screens.
    4. On hover they should expand and become bigger, they might also be linked. (possibly optional depending on your needs)
    5. If a row is incomplete, images should be added to the end to fill a row, so it looks like a continuous block.