Collection of free jQuery hover effect examples and plugins for images, tables, text and other. Update of January 2018 collection. 6 new items.

  1. CSS Hover Effects
  2. Bootstrap Hover Effects

Creator

  • Álex S. Lérida

Programming language

  • HTML / CSS / JS

Information a code

High Five Hover Effect

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Creator

  • Alyssa X

Programming language

  • HTML / CSS / JS

Information 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!).

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: parallax.js

Creator

  • Joshua Ward

Programming language

  • HTML (Pug) / CSS (SCSS) / JS

Information a code

Splash Page Hover Stuff

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Pete Barr

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Subtle 3D Rotation Image Distortion

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery-ui.css, tweenmax.js

Creator

  • Craig Roblewsky

Programming language

  • HTML / CSS / JS

Information a code

Quick Broken Glass on Hover

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Creator

  • roks0n

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Hover Animation

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Demo image: Tilt.js
Made by

  • Gijs Rogé
Github activity

  • 1919 stars
  • 57 watchers

Information the plugin

Tilt.js

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

Demo image: Marginotes
Made by

  • Francisco Dans
Github activity

  • 869 stars
  • 23 watchers

Information the plugin

Marginotes

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

Demo image: hoverIntent jQuery Plug-in
Made by

  • Brian Cherne
Github activity

  • 722 stars
  • 40 watchers

Information the plugin

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…

Demo image: Spoiler Alert
Made by

  • Joshua Hull
Github activity

  • 477 stars
  • 25 watchers

Information the plugin

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.

Demo image: freezeframe.js
Made by

  • ctrl-freaks
Github activity

  • 457 stars
  • 13 watchers

Information the plugin

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.

Demo image: ZooMove
Made by

  • Emerson Thompson
Github activity

  • 295 stars
  • 16 watchers

Information the 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+.

Demo image: jQuery Hover3d
Made by

  • Rian Ariona
Github activity

  • 233 stars
  • 11 watchers

Information the plugin

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.

Demo image: Wholly
Made by

  • Gajus Kuizinas
Github activity

  • 200 stars
  • 17 watchers

Information the plugin

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.

Demo image: Pixelate
Made by

  • James Garbutt
Github activity

  • 199 stars
  • 9 watchers

Information the plugin

Pixelate

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

Demo image: Hovercard
Made by

  • Prashant Chaudhary
Github activity

  • 140 stars
  • 15 watchers

Information the plugin

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
Demo image: jQuery.mousetip
Made by

  • Nathan Rutzky
Github activity

  • 111 stars
  • 7 watchers

Information the plugin

jQuery.mousetip

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

Demo image: Reactive-Listener
Made by

  • zurb
Github activity

  • 34 stars
  • 15 watchers

Information the plugin

Reactive-Listener

Showing a response to stimulus.

Demo image: HoverSlippery
Made by

  • Mogeli lortkipanidze
Github activity

  • 18 stars
  • 1 watchers

Information the plugin

HoverSlippery

The jQuery plugin for doing cool hovers on inline navigations.

Demo image: sparkleHover
Made by

  • Eve Weinberg
Github activity

  • 5 stars
  • 3 watchers

Information the plugin

sparkleHover

A jQuery plugin to add sparkles to anything on hover.

Demo image: jQuery-plate
Made by

  • Krebsz Attila
Github activity

  • 4 stars
  • 1 watchers

Information the plugin

jQuery-plate

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

Features

  • remote effect