Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    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.

    Flip Box : jQuery Bootstrap Flipping Card

    Flip Box : jQuery Bootstrap Flipping Card

    Flip Box is a simple and easy customizable flip animation. It’s made with Bootstrap responsive design and some awesome animations. It’s solution for creating beautiful Flip Boxs or Flip Cards without customize any javascript code. It has 12+ Layouts, Click Flip Effect, Hover Flip Effect, Vertical & Horizontal Flip and other lots of customization options and can be easily integrated to any website.

    Water Ripple effect jQuery plugin

    Water Ripple effect jQuery plugin

    I was always fascinated by the “water ripple effect” and so it was time to deal with it. The result is a small jQuery plugin, which you can easily integrate into your projects. As with my last jQuery plugins, you can use the “water ripple effect” with, or without jQuery. As a zip and minifiert is this plugin only 2KB large.

    Stack Motion Hover Effects with CSS & JavaScript

    Stack Motion Hover Effects with CSS & JavaScript

    Today we’d like to share some tiny hover effect ideas with you. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.