Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    CSS-Only Marquee Effect

    CSS-Only Marquee Effect

    A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot.It has a really nice marquee animation when hovering a menu item (you have to wait a couple of seconds to see the menu).

    Background Scale Hover Effect with CSS Clip-path

    Background Scale Hover Effect with CSS Clip-path

    A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image. The shape is visible because the opacity of the background is a bit lower.

    Gooey Image Hover Effects with Three.js

    Gooey Image Hover Effects with Three.js

    Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader. For the demo itself, I’ve created a more practical example that shows a vertical scrollable layout with images, where each one has a variation of the effect. You can click on an image and it will expand to a larger version while some other content shows up (just a mock-up). We’ll go over the most interesting parts of the effect, so that you get an understanding of how it works and how to create your own.

    Image.preview.js : jQuery Hoverable Image & Video Previews Plugin

    Image.preview.js : jQuery Hoverable Image & Video Previews Plugin

    A simple jQuery plugin that adds hoverable image and video previews to links and other elements.

    Freezeframe.js : Library that Pauses Animated Gifs

    Freezeframe.js : Library that Pauses Animated Gifs

    Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

    Sticky Image Effect with Three.js

    Sticky Image Effect with Three.js

    A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.

    jQuery Parallax Background Plugin

    jQuery Parallax Background Plugin

    jQuery parallax background plugin based on GSAP.In parallaxBackground you can add settings using the data-parallax-background attribute. You still need to call $(element).parallaxBackground() to initialize parallaxBackground on the element.

    Animated Direction Reveal Effect with JavaScript

    Animated Direction Reveal Effect with JavaScript

    This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction.

    The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.

    FollowCursor : Following Effect on Hover with JavaScript

    FollowCursor : Following Effect on Hover with JavaScript

    FollowCursor is a rotate elements to create a following effect.

    On-hover image zoom effect using SCSS and Jade

    On-hover image zoom effect using SCSS and Jade

    The use of the :on-hover pseudo-selector and the (~) general sibling selector to create a mouseover zoom effect that follows your mouse cursor—similar to the effect that Amazon uses for its product photos—all without the use of JavaScript.