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

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Item Background Move

Author:
Wikyware Net | September 21, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Elastic Hover

Author:
dlirA01 | December 21, 2020
Made with:
HTML / CSS / JS

About a code

Elastic hover using vanilla JavaScript and jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
unicons.css, gsap.js

GSAP: Cursor Hover Effect

Author:
roeslein | April 16, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js

High Five Hover Effect

Author:
Álex S. Lérida | April 10, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
gsap.js

Portfolio Hover

Author:
Alyssa X | February 21, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
parallax.js

Splash Page Hover Stuff

Author:
Joshua Ward | November 7, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Subtle 3D Rotation Image Distortion

Author:
Pete Barr | May 12, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Quick Broken Glass on Hover

Author:
Craig Roblewsky | May 4, 2018
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js

Project Hover Concept

Author:
Kyle Brumm | February 26, 2017
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tilt.js

Tilt.js

Author:
Gijs Rogé | January 13, 2017
Made with:
1919 stars57 watchers

About a code

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

Marginotes

Marginotes

Author:
Francisco Dans | March 1, 2016
Made with:
869 stars23 watchers

About a code

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

HoverIntent jQuery Plugin

HoverIntent jQuery Plugin

Author:
Brian Cherne | February 21, 2011
Made with:
722 stars40 watchers

About a code

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.

About a code

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

Spoiler Alert

Author:
Joshua Hull | February 23, 2013
Made with:
477 stars25 watchers

About a code

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

Author:
ctrl-freaks | November 27, 2012
Made with:
457 stars13 watchers

About a code

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

ZooMove

Author:
Emerson Thompson | January 2, 2016
Made with:
295 stars16 watchers

About a code

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

Author:
Rian Ariona | March 11, 2016
Made with:
233 stars11 watchers

Wholly

Wholly

Author:
Gajus Kuizinas | April 1, 2014
Made with:
200 stars17 watchers

About a code

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

Author:
James Garbutt | November 16, 2013
Made with:
199 stars9 watchers

About a code

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

Hovercard

Hovercard

Author:
Prashant Chaudhary | December 23, 2012
Made with:
140 stars15 watchers

About a code

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.

jQuery.mousetip

jQuery.mousetip

Author:
Nathan Rutzky | May 15, 2015
Made with:
111 stars7 watchers

About a code

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

Reactive-Listener

Reactive-Listener

Author:
zurb | October 28, 2016
Made with:
34 stars15 watchers

About a code

Showing a response to stimulus.

HoverSlippery

HoverSlippery

Author:
Mogeli lortkipanidze | July 8, 2016
Made with:
18 stars1 watchers

About a code

The jQuery plugin for doing cool hovers on inline navigations.

sparkleHover

sparkleHover

Author:
Eve Weinberg | January 15, 2017
Made with:
5 stars3 watchers

About a code

A jQuery plugin to add sparkles to anything on hover.

jQuery-plate

jQuery-plate

Author:
Krebsz Attila | May 23, 2017
Made with:
4 stars1 watchers

About a code

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨