250+ jQuery & CSS3 Hover Effects (Plugins & Tutorials)
jQuery and CSS3 made a big difference in the webdesign industry. Lot of new features added to make dynamic websites. Hover effects are often used in websites to add usability. There are plenty of ideas to make the hover effect more effective and beautiful. In this post, we have collected a list of amazing hover effects using jQuery and CSS3. You can see many varieties of hover effects below. All these are either using the advantage of jQuery or CSS3.
We have listed all categories of hover effects below so you can navigate easily.
jQuery & CSS3 Hover Effect Categories
See also : 100+ Best jQuery Slider Plugins Free
1. Hover Effect Tutorials
Hover Effect Tutorials Categories
See also : Ultimate CSS Resources (CSS Tools, Frameworks, Ebooks, Snippets..)
Image Hover Effects Tutorials
Sliding Image Divider

3D Thumbnail Hover Effects

3D Hover Effect for Thumbnails and Images

Beautiful Image Hover Effects with jQuery/CSS3

Caption Hover Effects

Direction-Aware Hover Effect with CSS3 and jQuery

Original Hover Effects with CSS3

jQuery Mouseover Effect Using Parallax Style Tutorial

Some More Subtle Hover Effect Ideas

Image Caption Animation with CSS3 Transform and Transitions

jQuery image slide on hover effect

Image Cross Fade Transition

Image Highlighting and Preview with jQuery

CSS3 Hover Effect Tutorial with Image Circle

Annotation Overlay Effect with CSS3

PFold: Paper-Like Unfolding Effect

Useful and Practical jQuery Image ToolTips

Bubbleriffic Image Gallery with jQuery

CSS Triangle Image Crop

Display Images with Shape Masking and Nifty Zoom Effect

Thumbnails Preview Slider with jQuery

Hover Slide Effect with jQuery

Magnifying glass for image zoom using Jquery and CSS3

Flat Folio

Simple yet amazing CSS3 border transition effects

Text Revel on Hover: Corner Triangle Slide Overlay

Animated Skills Diagram with Raphaël

Simple animated hover effect for images using CSS3 and HTML

Ideas for Subtle Hover Effects

Create Different Styles of Hover Effects with CSS3 Only

CSS3 Hover Effects

10 Easy Image Hover Effects You Can Copy and Paste

Simple hover effects with CSS(webkit) filters

Create a Pentagon Hover Effect with CSS3 and jQuery

Diagonal Sliding Hover Transition

Navigation Hover Effects Tutorials
Make a simple navigation with hover transitions

CSS3 Hover Effect using :after Psuedo Element

CSS3 Navigation Hover Effect

hover effect

Navigation hover effect

Simple css3 navigation hover effect

Icon Hover Effects Tutorials
Social Media icons With CSS 3D hover effects

Simple Icon Hover Effects

CSS3 Hover Effects

Menu Hover Effects Tutorials
3D Cube Rotate Menu

Scrollable Thumbs Menu with jQuery

Unfolding Menu Animation

CSS3 Hover Effects Style Restaurant Menus

jQuery Wheel Menu

SASS: Menu Hover Effect

CSS3 Menu hover effects

Simple menu effect

Menu Hover Effects

CSS3 Menu hover effects

Moving border menu hover

Simple Menu Hover Effect

Table Menu Hover Effects

Simple Horizontal Nav Menu Hover Effects (List Style)

Menu Hover Effect

Flat Pure CSS Nav Menu Hover Effects

Button Hover Effects Tutorials
CSS Animated Buttons With Icons

CSS Powered Buttons with Hover Tooltips

Swinging effect with CSS3 animations

Creative Button Styles

Wacom button hover effect

Menu Button Hover Effect

Transitional Buttons

Collection of Button Hover Effects

Button Hover Effects

Nice button hover effect

CSS animated button

Buttons hover effect

Button hover effects

Button hover effect

Circle button hover effect

Examples of Pseudo-Elements Animations and Transitions

CSS3 Hover Effects with Websymbols Tutorial

Button Hover Effect

Flat & Shiny Button (hover effect)

Button Hover Effect

Pure CSS easing button hover effect

Flat Bevel button hover effect

Button hover effect

Social Buttons Hover Effect

Menu button hover effect

Button hover effect #3

Button hover effect

Button Hover

Button Efffect – Color Fill

Traffic Light Buttons Hover Effect

Button Hover Effects

Button hover effect

Simple Button Hover Effect

A Pen by Richard Pullinger

Circle Fill Up Button Hover Effect

Diagonal fill button hover effect

Button Hover Effects

Button hover effect

Button hover effect

Button Hover Effect 2

Circle Fill Up Button Hover Effect

Logo Hover Effects Tutorials
Logo with Slim and SCSS

PF Logo Snap.svg

Pyramid Logo Hover Animation

Logo Hover effect

Text Hover Effects Tutorials
Animated Opening Type

Text Hover Effects

Nice CSS3 text hover effect

Text hover effect

Creative Text hover effects

Text hover effect

Tiles with animated :hover

Link Hover Effects Tutorials
How to Create Five Simple Hover Effects for Your Navigation Links

Creative Link Effects

Use CSS transitions for link effects

3D hover effect in CSS

Creative Link Effects

Link Hover Effects

Playing with Link Hover Effects

Creative Link Effects #2

Creative Link Effects #3

Link Hover Effect

Link Hover Effect #2

Creative Link Effects #4

Creative Link Effects #5

Creative Link Effects #6

Creative Link Effects #7

link hover 6

Link text slide up and down

link hover

Link hover 8

Link hover 7

Link Hover Effect #2

Social Link Hover Hinge Effect

Links hover gradient effect

SVG Hover Effects Tutorials
Creating a Border Animation Effect with SVG and CSS

Shape Hover Effect with SVG

2. Hover Effect Plugins
Hover Effect Plugins Categories
jQuery Hover Plugin
Adipoli jQuery Image Hover Plugin

Flip jQuery Plugin

Swish jQuery Zoom Hover Effect Plugin

AnythingZoomer jQuery Plugin

HoverPulse jQuery Plugin

Animated jQuery Content Hover Effect Plugin

hoverIntent jQuery Plug-in

Hover Captions (HCaptions) jQuery plugin

jQuery.aim Plugin

Slickhover jQuery plugin

randomizeColor jQuery plugin

Hovercard jQuery Plugin

Mate Hover jQuery Plugin

Zalki Hover Image – Plugin jQuery

hoverOver – jQuery Plugin for Adding Hover Content

jQuery Hotspot Plugin with Slideshow

jQuery Hover Cards

SlipHover

Hoverizr

jQuery PowerTip

HoverScroll jQuery Plugin

JQuery hover caption plugin

jquery.hoverGrid

pixelate.js

jquery-hover-dropdown-box.js

jQuery HoverCrossfade

FloatingTips

Leaflet.TouchHover

raphael.set.hoverset

ImageOnHover

a class=”btn-source” href=”https://github.com/Equals182/ImageOnHover” target=”blank” > Download
jQuery CSS3 Hover Transform Plugin

jQuery Image Hover Move

Accelerated Hover Scroll

videojs-progressTips

jQuery CSS3 Image Hover Effects

jRumble

showOnHover.js

Hover Panels

jquery-hovercap

jquery-big-image.js

Ractive.js hover event plugin

jQuery.hoverDelay.js

jQuery socialpic Plugin

WordPress Hover Plugin
Image Caption Hover

Caption Pro – Image Caption WordPress Plugin

Amazing Hover Effects WordPress Plugin

Hover Effects Pack – WordPress Plugin

WordPress Hover Image & Content Tooltip Plugin

Image Hover View Woocommerce

WordPress Image Hover Showcase

Social Image Hover for WordPress

Anyhover Image Effects

WP Easy Social Hover

Smart Grid Gallery – Responsive WP Gallery Plugin

WordPress Image Hover Effect Plugin

Kings Caption Hover

Bootstrap Hover Plugin
3. CSS3 Hover Effect
Hover.css

tFigure – Image Captions

CSS3 Hover Effects

HoverMe – Collection of CSS3 Hover Effects

CSS3 Image Hover Effects

Advanced CSS3 Hover Effects 2

CSS3 Shadow Hover Effects

CSS3 Shadow Hover Effects

CSS3 Image Hover Effects – Pure CSS

Advanced CSS3 Hover Effects 5 w/ Banners

Killer CSS3 Image Hover Effects

CSS3 Image Hover Effects Vol.2

CSS3 Image – Text Hover Effects

CSS3 Hover Effect Transitions, Transformations, Animations
