Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Hotspotter : Hotspot Maker jQuery Plugin

    Hotspotter : Hotspot Maker jQuery Plugin

    Easily create amazing hotspots on your images with just point & click!

    Features:

    • Different Types of Spots & Tooltips
    • UNIQUE & Amazing Aiming Effect!
    • Tip & Bubble tooltips
    • Change tooltip direction “top, bottom, right, left”
    • Different tooltip animations
    • Change tooltip position relative to spot
    • Activate it on hover , click or make it always active
    • Change spot border radius
    • Make your spot point to a URL
    • Add text or HTML content to tooltips
    • Unobtrusive spots
    • Create spots with your own images!
    • Share your spots “have a direct link to it , when navigating to this link the browser window will scroll down to where the image is located & trigger spot”
    • Fully Responsive

    jQuery Image Color Up Plugin

    jQuery Image Color Up Plugin

    With Color-Up jQuery plugin easily add beautiful hover effects to your images, add transitions from (and to) a monochrome, sepia, negative, darkened or lightened version of the image.

    hoverOver : jQuery Plugin for Adding Hover Content

    hoverOver : jQuery Plugin for Adding Hover Content

    “hoverOver” plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content.

    Features:

    • Hover over content can be defined on text content or image
    • You can define content text either in contentData or define data-content=’#contentID’ and define content inside Hover Content Goes Here
    • 14 different animation styles
    • 5 styles for show content e.g. fly, curtain, push, pull, tocenter/fromcenter
    • Content can be half visible using contentShowHeight. (e.g. Can be used with “flytop” & “flybottom”)

    Live Album Previews with CSS3 and jQuery

    Live Album Previews with CSS3 and jQuery

    Today we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.

    jCapSlide: A jQuery Image Caption Plugin

    jCapSlide: A jQuery Image Caption Plugin

    Here is a new plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.

    jQuery My Fade Over Image

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

    spriteOnHover (Sprite on Hover) – jQuery plugin

    spriteOnHover (Sprite on Hover) – jQuery plugin

    spriteOnHover (Sprite on Hover) is a lightweight jQuery plugin designed to animate your sprite sheets on hover (duh).The spriteOnHover plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported.

    jQuery Sticky Captions Concept with CSS3

    jQuery Sticky Captions Concept with CSS3

    When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.

    A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.

    Hover-Zoom : Facebook style zoom on Image hover in jQuery

    Hover-Zoom : Facebook style zoom on Image hover in jQuery

    This Javascript plugin displays a your images in full size when the mouse hovers over them.Just include this plugin and all images in your webpage will have the Hover-Zoom effect!

    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