Collection of free jQuery hover effect code examples and plugins for images, tables, text and other from Codepen and Github. Update of December 2020 collection. 4 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Item Background Move
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Elastic Hover
Elastic hover using vanilla JavaScript and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: unicons.css, gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
GSAP: Cursor Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js
Links
Made with
- HTML / CSS / JS
About a code
High Five Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS / 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
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Splash Page Hover Stuff
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
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
Links
Made with
- HTML / CSS / JS
About a code
Quick Broken Glass on Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Project Hover Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

- 1919 stars
- 57 watchers
Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

- 869 stars
- 23 watchers
Marginotes
Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes.

- 722 stars
- 40 watchers
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...

- 477 stars
- 25 watchers
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.

- 457 stars
- 13 watchers
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.

- 295 stars
- 16 watchers
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+.

- 233 stars
- 11 watchers
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.

- 200 stars
- 17 watchers
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
.

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

- 140 stars
- 15 watchers
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.
Features- 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

- 111 stars
- 7 watchers
jQuery.mousetip
Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

- 34 stars
- 15 watchers
Reactive-Listener
Showing a response to stimulus.

- 18 stars
- 1 watchers
HoverSlippery
The jQuery plugin for doing cool hovers on inline navigations.

- 5 stars
- 3 watchers
sparkleHover
A jQuery plugin to add sparkles to anything on hover.

- 4 stars
- 1 watchers
jQuery-plate
An easy to use jQuery plugin for adding nice 3D hover effect on any element.
Features- remote effect