Collection
Post cover
Created 4 month back

Best 21 jQuery Hover Effects

Collection of free jQuery hover effect examples and plugins for images, tables, text and other.

Post cover

Reactive-Listener

Showing a response to stimulus.

Author: zurb

Links: GitHub

Made with: JavaScript (50.4%), HTML (43.4%), CSS (6.2%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
42 16 9
Post cover

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.

Author: ctrl-freaks

Links: GitHub, Website

Made with: TypeScript (42.1%), JavaScript (22.0%), SCSS (10.2%), Vue (9.0%), EJS (8.6%), HTML (6.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
1.3k 24 103
Post cover

jQuery-plate

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

Author: Krebsz Attila

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
10 1 4
Post cover

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.

Author: Rian Ariona

Links: GitHub

Made with: CSS (44.1%), JavaScript (29.0%), HTML (26.9%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
332 16 109
Post cover

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.

Author: Prashant Chaudhary

Links: GitHub

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
144 12 54
Post cover

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.

Author: Gajus Kuizinas

Links: GitHub, Website

Made with: JavaScript (94.3%), CSS (5.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
203 15 31
Post cover

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...

Author: Brian Cherne

Links: GitHub, Website

Made with: HTML (66.8%), JavaScript (33.2%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
821 38 258
Post cover

Tilt.js

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

Author: gijsroge

Links: GitHub, Website

Made with: JavaScript (94.2%), HTML (5.8%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
3.5k 72 891

Portfolio Hover

Author: Alyssa X

Links: demo and code

Made with: HTML / CSS / JS

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

Dependencies: parallax.js

Post cover

jQuery.mousetip

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

Author: nathco (Nathan Rutzky)

Links: GitHub

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
110 8 9
Post cover

sparkleHover

A jQuery plugin to add sparkles to anything on hover.

Author: Eve Weinberg

Links: GitHub, Website

Made with: JavaScript (66.5%), HTML (33.5%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
9 2 3

High Five Hover Effect

Author: Álex S. Lérida

Links: demo and code

Made with: HTML / CSS / JS

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

Dependencies: gsap.js

Post cover

Pixelate.js

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

Author: 43081j (James Garbutt)

Links: GitHub

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
208 9 40

Splash Page Hover Stuff

Author: Joshua Ward

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Responsive: yes

Post cover

HoverSlippery

The jQuery plugin for doing cool hovers on inline navigations.

Author: hastalavistababy (Mogeli lortkipanidze)

Links: GitHub

Made with: HTML (44.9%), CoffeeScript (28.9%), CSS (15.1%), JavaScript (11.1%)

Hover Animation

Author: roks0n

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Dependencies: tweenmax.js

Post cover

ZooMove - jQuery Zoom Image

It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.

Author: thompsonemerson (Emerson Thompson)

Links: GitHub, Website

Made with: JavaScript (91.5%), Sass (8.5%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
339 16 55

Quick Broken Glass on Hover

Author: Craig Roblewsky

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Dependencies: tweenmax.js

Post cover

Marginotes

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

Author: fdansv (Francisco Dans)

Links: GitHub

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
868 22 52

Subtle 3D Rotation Image Distortion

Author: Pete Barr

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Post cover

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.

Author: joshbuddy (Joshua Hull)

Links: GitHub

Made with: JavaScript (97.2%), Makefile (2.8%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
473 22 52

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback