21 jQuery Hover Effects

About a code

High Five Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

About a code

Portfolio Hover

Simple experiment for my new portfolio - a brand new way to showcase my products while being interactive & displaying images, through a parallax mouse hover effect, built using jQuery (& no libraries!).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: parallax.js

About a code

Splash Page Hover Stuff

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Subtle 3D Rotation Image Distortion

This is an example of the 3D distortion hover effect in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery-ui.css, tweenmax.js

About a code

Quick Broken Glass on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

About a code

Hover Animation

Animate and resize a "hotspot" on mouseover and resize it back down when mouseout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Tilt.js

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Marginotes

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes.

HoverIntent jQuery Plugin

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...

Spoiler Alert

Don't spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click. Do you publish spoilers? Do you wish you could have them on your page in a way that wasn't fucking rude? With Spoiler Alert! you can! Hide spoilers with a bit of blur.

Freezeframe.js

Freezeframe.js is a script that pauses animated .gifs and enables them to animate on mouse hover/mouse click/touch event, or with trigger/release functions. It supports responsive images and works as a jQuery plugin.

ZooMove

It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move. Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+.

jQuery Hover3d

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane 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.

Wholly

jQuery plugin used to select the entire table row and column in response to mouseenter and mouseleave events. Wholly supports table layouts that utilize colspan and rowspan.

Pixelate

Pixelate.js is a simple library and jQuery plugin to pixelate any set of images and optionally reveal them on hover.

Hovercard

A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

• smoothly fades the name into a hovered card (in place)
• uses minimum css and no external stylesheets to download
• full control over html to be displayed
• comes with built in Twitter and Facebook hovercard
• supports callback functions on hover in and hover out
• auto adjust on the edges of viewport

jQuery.mousetip

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

Reactive-Listener

Showing a response to stimulus.

HoverSlippery

The jQuery plugin for doing cool hovers on inline navigations.

sparkleHover

A jQuery plugin to add sparkles to anything on hover.

jQuery-plate

An easy to use jQuery plugin for adding nice 3D hover effect on any element.

• remote effect