Best jQuery Image Hover Effect Plugins & Tutorials with Demo

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;

jQuery Hover3d : 3d Hover Effect

jQuery Hover3d : 3d Hover Effect

jQuery Hover3d is a simple hover script for creating 3d hover effect.The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

Philter : A JS plugin for CSS Filters

Philter : A JS plugin for CSS Filters

Philter is an open source JavaScript plugin that allows you to control CSS filters through HTML attributes counting on hover event triggered effects.

Ultimate Image Hover effects using CSS3

Ultimate Image Hover effects using CSS3

In this tutorial, total number of 8 ultimate hover effects and every single effect contain 3 different effects using same property of CSS3. So you easily learn the single property like transform, translate and transition use with 3 demos.

Drift : Javascript Zoom On Hover Plugin

Drift : Javascript Zoom On Hover Plugin

Easily add “zoom on hover” functionality to your site’s images. Lightweight, no-dependency JavaScript.

Interactive Room Display with JavaScript & CSS

Interactive Room Display with JavaScript & CSS

Today we’d like to share a little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections and add some interesting dynamic to the whole thing.

Parallax.js : jQuery Parallax Engine

Parallax.js : jQuery Parallax Engine

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

jQuery Brazzers Carousel

jQuery Brazzers Carousel

jQuery Brazzers Carousel is a lightweight, responsive thumbnails hover carousel plugin for Blogs & Online Stores.

cardflip : Card flip Animation with jQuery & CSS3

cardflip : Card flip Animation with jQuery & CSS3

Simple card flip animation using jQuery and CSS3 animations.



Best jQuery websites design awards