Best jQuery Image Hover Effect Plugins & Tutorials with Demo

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.

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js is a tiny request AnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.

Tilt Hover Effects with CSS & JavaScript

Tilt Hover Effects with CSS & JavaScript

Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect on its parts. Having several elements in the item (that we call “tilter”), we can achieve a variety of effects that look very interesting. There’s the image, the “shine” element, the semi-transparent overlay with a colorful gradient, a border element and the caption.

rsRefPointer : jQuery Visual Relationships between Page elements

rsRefPointer : jQuery Visual Relationships between Page elements

Eases web navigation, through the use of visual relationships (arrows) between page elements.

  • Arrows makes a visual connection from a start element to an end element, even when the position/size of these elements change;
  • Non intrusive. The arrows are hidden by default and only appear when the mouse overs the start element (or when the start element receives focus for mobile devices). Alternatively they can be always visible;
  • Shapes available: Line, Polyline, Quadratic Bezier curves and Cubic Bezier curves;