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.

See also : 100+ Best jQuery Slider Plugins Free

1. Hover Effect Tutorials

See also : Ultimate CSS Resources (CSS Tools, Frameworks, Ebooks, Snippets..)

Image Hover Effects Tutorials

Sliding Image Divider

Sliding Image Divider

It is an image divider that shows two different images and when you hover over it the partition follows your mouse movements. so if you move it to the left, the right image will be revealed more and vice versa for the left image. This is done using jQuery’s on mousemove event along with css transitions to make it smoother.

Live Demo Source

3D Thumbnail Hover Effects

3D Thumbnail Hover Effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.

Live Demo Source

3D Hover Effect for Thumbnails and Images

3D Hover Effect for Thumbnails and Images

A simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover with a cool shadow effect.

Source

Beautiful Image Hover Effects with jQuery/CSS3

Beautiful Image Hover Effects with jQuery/CSS3

In this tutorial two beautiful image hover effects with jquery and CSS3. This example1 we want to show you, jquery hover effect using animation opacity transform color and the example2 you will see classic effect using zoom overlay using jquery and css.

Live Demo Source

Caption Hover Effects

Caption Hover Effects

A tutorial on how to create some subtle and modern caption hover effects.

Live Demo Source

Direction-Aware Hover Effect with CSS3 and jQuery

Direction-Aware Hover Effect with CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

Live Demo Source

Original Hover Effects with CSS3

Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Live Demo Source

jQuery Mouseover Effect Using Parallax Style Tutorial

jQuery Mouseover Effect Using Parallax Style Tutorial

In this tutorial we are going to show you in a very creative way using parallax style with jquery mouse over effect. On mouse over a parallax, animation image layer are response to the mouse travelling the whole width of the mouse port, the position of image move depend on css style that we have defined in different style in example.

Live Demo Source

Some More Subtle Hover Effect Ideas

Some More Subtle Hover Effect Ideas

A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions.

Live Demo Source

Image Caption Animation with CSS3 Transform and Transitions

Image Caption Animation with CSS3 Transform and Transitions

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

Live Demo Source

Image Overlay Hover Effects With CSS3 Transitions

Image Overlay Hover Effects With CSS3 Transitions

In this tutorial, we’re going to build some image overlay hover effects with CSS3 transitions. When we hover over an image, a neat transition will occur, showing us an icon that hints the user to click on it for more.

Live Demo Source

Pretty Hover Effects with CSS and jQuery

Pretty Hover Effects with CSS and jQuery

This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only.

Live Demo Source

Hover Zoom Effect with jQuery and CSS

Hover Zoom Effect with jQuery and CSS

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails.

Live Demo Source

jQuery image slide on hover effect

jQuery image slide on hover effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.

Live Demo Source

Image Cross Fade Transition

Image Cross Fade Transition

Simple but creative way to use jQuery hover fades effect for your images.

Live Demo Source

Image Highlighting and Preview with jQuery

Image Highlighting and Preview with jQuery

In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context.

Live Demo Source

CSS3 Hover Effect Tutorial with Image Circle

CSS3 Hover Effect Tutorial with Image Circle

In tutorial we will show you new CSS3 hover effects using image circle animation transform to enhance your web design interface . It looks so much more interesting with creative design using circles image transition style. We always like CSS3 animation effects more than jquery of flash animation, so we would like to share some new creating special CSS3 hover effects for you!

Live Demo Source

Annotation Overlay Effect with CSS3

Annotation Overlay Effect with CSS3

A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.

Live Demo Source

PFold: Paper-Like Unfolding Effect

PFold: Paper-Like Unfolding Effect

A highly experimental jQuery plugin that let’s you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified.

Live Demo Source

Useful and Practical jQuery Image ToolTips

Useful and Practical jQuery Image ToolTips

It displays a tooltip image when user hover on the thumbnail with fadein and out effect. it’s a useful script for your website.

Live Demo Source

Bubbleriffic Image Gallery with jQuery

Bubbleriffic Image Gallery with jQuery

In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse.

Live Demo Source

CSS Triangle Image Crop

CSS Triangle Image Crop

Live Demo Source

Display Images with Shape Masking and Nifty Zoom Effect

Display Images with Shape Masking and Nifty Zoom Effect

How to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it’s made.

Live Demo Source

Thumbnails Preview Slider with jQuery

Thumbnails Preview Slider with jQuery

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view.

Live Demo Source

Hover Slide Effect with jQuery

Hover Slide Effect with jQuery

The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random.

Live Demo Source

Magnifying glass for image zoom using Jquery and CSS3

Magnifying glass for image zoom using Jquery and CSS3

Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.

Source

Flat Folio

Flat Folio

A simple flat portfolio style that doesn’t suck. Saw a similar style on a theme and had to re-create it. Added some animate.css by Dan Eden and a hover effect.

Source

Simple yet amazing CSS3 border transition effects

Simple yet amazing CSS3 border transition effects

Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.

Source

Text Revel on Hover: Corner Triangle Slide Overlay

Text Revel on Hover: Corner Triangle Slide Overlay

I’m trying to come up with ideas for my new site’s homepage and “mem”. Just testing out another hover technique.

Live Demo Source

Animated Skills Diagram with Raphaël

Animated Skills Diagram with Raphaël

In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle.

Live Demo Source

Simple animated hover effect for images using CSS3 and HTML

Simple animated hover effect for images using CSS3 and HTML

In this article we woud like to introduce some of CSS3 styles that allows to display a code using animated effects. As for example we will take a product, which you can display in a custom HTML module of Joomla.

Live Demo Source

Ideas for Subtle Hover Effects

Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.

Live Demo Source

Create Different Styles of Hover Effects with CSS3 Only

Create Different Styles of Hover Effects with CSS3 Only

Pure CSS3 animation such as flashing, fading, spinning, zooming, moving and a serial of complicated animations are emerging. What seems to be impossible to achieve with CSS only are now achievable fairly easily.

Live Demo Source

CSS3 Hover Effects

CSS3 Hover Effects

In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects.

Live Demo Source

10 Easy Image Hover Effects You Can Copy and Paste

10 Easy Image Hover Effects You Can Copy and Paste

We’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.

Live Demo Source

Simple hover effects with CSS(webkit) filters

Simple hover effects with CSS(webkit) filters

Simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence the walkthrough only uses the -webkit prefix for applying the filter effects.

Source

Create a Pentagon Hover Effect with CSS3 and jQuery

Create a Pentagon Hover Effect with CSS3 and jQuery

This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image.

Live Demo Source

Diagonal Sliding Hover Transition

Diagonal Sliding Hover Transition

create a hover transition that could be used for image links. A good hover effect can save space on showing more information until hover, while also creating an enticing and interesting effect. The diagonal effect is achieved through positioning a triangle attached to a long rectangle at the right of the image out of sight and transitioning it left through the image so it looks like it is filling up diagonally. This is a CSS only effect.

Live Demo Source

Make a simple navigation with hover transitions

Make a simple navigation with hover transitions

A simple navigation with transition effects on hover.

Source

CSS3 Hover Effect using :after Psuedo Element

CSS3 Hover Effect using :after Psuedo Element

Navigation hover effect using :after psuedo-element.

Live Demo Source

CSS3 Navigation Hover Effect

CSS3 Navigation Hover Effect

Simple and clean hover effect for navigation buttons or links.

Live Demo Source

hover effect

hover effect

Live Demo Source

Navigation hover effect

Navigation hover effect

Live Demo Source

Simple css3 navigation hover effect

Simple css3 navigation hover effect

Live Demo Source

navigation hover effect

navigation hover effect

Live Demo Source

Icon Hover Effects Tutorials

Social Media icons With CSS 3D hover effects

Social Media icons With CSS 3D hover effects

A new CSS3 3D hover effect for social media icons. The result can be seen, as usual, on Dabblet. It uses CSS3 transitions, transforms and 3D properties.

Live Demo Source

Simple Icon Hover Effects

Simple Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Live Demo Source

CSS3 Hover Effects

CSS3 Hover Effects

A showcase of most CSS3 hover effects.

Live Demo Source

3D Cube Rotate Menu

3D Cube Rotate Menu

I instantly fell in love with the unique animations and feel of the website that I almost missed the beautiful sidebar menu. It has a sleek 3D cube rotation effect on each link in the menu. Basically, on hover the link is supposed to look like a 3D cube that rotates 90 degrees. This is achieved with CSS3 Transform Matrix 3D.

Live Demo Source

Scrollable Thumbs Menu with jQuery

Scrollable Thumbs Menu with jQuery

In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item.

Live Demo Source

Unfolding Menu Animation

Unfolding Menu Animation

Today I am going to be creating a cool unfolding menu animation. Two panels swing forward to reveal a submenu for the links in the menu. This uses the CSS3 transform: Rotate and perspective.

Live Demo Source

CSS3 Hover Effects Style Restaurant Menus

CSS3 Hover Effects Style Restaurant Menus

In this tutorial, we only use CSS transition and box shadow style to create beautiful image style with show and hidden text. In fact now we can use more properties of CSS to create style effects in stead of jQuery hover effects.

Live Demo Source

jQuery Wheel Menu

jQuery Wheel Menu

Add a fully customisable Path-like wheel menu button to your website.

Live Demo Source

SASS: Menu Hover Effect

SASS: Menu Hover Effect

Live Demo Source

CSS3 Menu hover effects

CSS3 Menu hover effects

A collection of hover effects for menus, using CSS3 transitions.

Live Demo Source

Simple menu effect

Simple menu effect

Just simple menu hover effect using background-position and transitions.

Live Demo Source

Menu Hover Effects

Menu Hover Effects

Just playing around with a menu and various shapes and hover effects.

Live Demo Source

Menu Hover Effects

Menu Hover Effects

Just messing with a little colourful menu hover effect.

Live Demo Source

CSS3 Menu hover effects

CSS3 Menu hover effects

A collection of hover effects for menus, using CSS3 transitions.

Live Demo Source

Moving border menu hover

Moving border menu hover

Simple menu hover effect using jquery and css3 transitions.

Live Demo Source

Simple Menu Hover Effect

Simple Menu Hover Effect

Live Demo Source

Table Menu Hover Effects

Table Menu Hover Effects

Menu made using tables. Hovering causes it to lengthen and focus on the link in the specific tab.

Live Demo Source

Simple Horizontal Nav Menu Hover Effects (List Style)

Simple Horizontal Nav Menu Hover Effects (List Style)

A horizontal list nav menu. Box Shadow, Border Bottom effects, and a fixed menu to stay on the top of the window while you scroll.

Live Demo Source

Simple Menu Hover Effect

Simple Menu Hover Effect

Just a thin line appearing on the menu item hover.

Live Demo Source

Menu Hover Effect

Menu Hover Effect

Live Demo Source

Flat Pure CSS Nav Menu Hover Effects

Flat Pure CSS Nav Menu Hover Effects

Live Demo Source

CSS3 Menu hover effects

CSS3 Menu hover effects

A collection of hover effects for menus, using CSS3 transitions.

Live Demo Source

Button Hover Effects Tutorials

CSS Animated Buttons With Icons

CSS Animated Buttons With Icons

CSS buttons have progressed so far with the help of CSS3. I saw some beautiful buttons from the website but those were all achieved by images. I wanted to recreate that style with CSS only. Using css border tricks to make the triangle arrows and box shadows to create the 3D effect, I created a simple CSS only button that looks just as good. Add transitions to add a little animation and you have a great looking animated button.

Live Demo Source

CSS Powered Buttons with Hover Tooltips

CSS Powered Buttons with Hover Tooltips

I’m only using social media button as an example, you can pretty much use them for any purposes. From the image you probably noticed the tool tip effect, check out the demo to see the button in action.

Live Demo Source

Swinging effect with CSS3 animations

Swinging effect with CSS3 animations

This tutorial demonstrate a nice and easy to achieve swing CSS3 hover effect.

Live Demo Source

Creative Button Styles

Creative Button Styles

Some creative and modern button styles and effects for your inspiration.

Live Demo Source

Wacom button hover effect

Wacom button hover effect

Live Demo Source

Menu Button Hover Effect

Menu Button Hover Effect

CSS Menu Button with hover effect.

Live Demo Source

Transitional Buttons

Transitional Buttons

Using of transitions in button hover effects.

Live Demo Source

Collection of Button Hover Effects

Collection of Button Hover Effects

A few examples of flashy hover effects.

Live Demo Source

Button Hover Effects

Button Hover Effects

Some button hover effects using psuedo elements and borders.

Live Demo Source

Nice button hover effect

Nice button hover effect

Live Demo Source

CSS animated button

CSS animated button

Playing with button hover effects.

Live Demo Source

CSS Buttons hover effects

CSS Buttons hover effects

Live Demo Source

Buttons hover effect

Buttons hover effect

Live Demo Source

Button hover effects

Button hover effects

Live Demo Source

Button hover effect

Button hover effect

Live Demo Source

Circle button hover effect

Circle button hover effect

Live Demo Source

Examples of Pseudo-Elements Animations and Transitions

Examples of Pseudo-Elements Animations and Transitions

Some creative experiments that use animations and transitions on pseudo-elements to create interesting effects.

Live Demo Source

CSS3 Hover Effects with Websymbols Tutorial

CSS3 Hover Effects with Websymbols Tutorial

In tutorial we are going to show you new CSS hover effects using CSS transition properties with websymbols. It looks so much more interesting with creative design using circles transition style. We like CSS3 hover effects, so we would like to share some new creating special hover effects for you!

Live Demo Source

Button Hover Effect

Button Hover Effect

Live Demo Source

Wacom button:hover effect

Wacom button:hover effect

Live Demo Source

Flat & Shiny Button (hover effect)

Flat & Shiny Button (hover effect)

Button with a subtle gloss/shine wipe on hover. No images, just a single HTML element and a CSS pseudo-element.

Live Demo Source

button hover effect

button hover effect

Live Demo Source

Button Hover Effect

Button Hover Effect

Live Demo Source

Pure CSS easing button hover effect

Pure CSS easing button hover effect

A simple button with a background that eases in on hover effect.

Live Demo Source

Flat Bevel button hover effect

Flat Bevel button hover effect

Live Demo Source

Button Hover Effects

Button Hover Effects

Simple red add to cart button with subtle hover animation.

Live Demo Source

Pure css3 Button hover effect

Pure css3 Button hover effect

Live Demo Source

Button hover effect

Button hover effect

Simple hover effect using background gradient.

Live Demo Source

Social Buttons Hover Effect

Social Buttons Hover Effect

Cool css transition effect upon hover. No images used for logos,font awesome is used.

Live Demo Source

Menu button hover effect

Menu button hover effect

Live Demo Source

Button hover effect #3

Button hover effect #3

Live Demo Source

Button hover effect

Button hover effect

Live Demo Source

Arrow Button Hover Effect

Arrow Button Hover Effect

Live Demo Source

Button Hover

Button Hover

A subtle button hover effect using CSS. Not very scalable, purely for experimentation.

Live Demo Source

Button Efffect – Color Fill

Button Efffect - Color Fill

Simple button hover effect using html5 and CSS. Color Fill from right to left.

Live Demo Source

Traffic Light Buttons Hover Effect

Traffic Light Buttons Hover Effect

Re-creating the similar effect from original Apple video of OSX Yosemite.

Live Demo Source

Pure CSS button hover effect

Pure CSS button hover effect

Live Demo Source

Button Hover Effects

Button Hover Effects

Live Demo Source

Button hover effect

Button hover effect

Hover effect with slide down icon.

Live Demo Source

Simple Button Hover Effect

Simple Button Hover Effect

Live Demo Source

A Pen by Richard Pullinger

A Pen by Richard Pullinger

Live Demo Source

Circle Fill Up Button Hover Effect

Circle Fill Up Button Hover Effect

Live Demo Source

Diagonal fill button hover effect

Diagonal fill button hover effect

Uses calc to leave symmetrical wedges on either side of the button.

Live Demo Source

Button Hover Effects

Button Hover Effects

Live Demo Source

Pure CSS easing button hover effect with fading icon

Pure CSS easing button hover effect with fading icon

A CSS button with inline-SVG icon that fades into view on hover.

Live Demo Source

Button hover effect

Button hover effect

Live Demo Source

Button hover effect

Button hover effect

Live Demo Source

Button Hover Effect 2

Button Hover Effect 2

Live Demo Source

Circle Fill Up Button Hover Effect

Circle Fill Up Button Hover Effect

Live Demo Source

Logo with Slim and SCSS

Logo with Slim and SCSS

Hover and hold this minimalistic logo.

Live Demo Source

PF Logo Snap.svg

PF Logo Snap.svg

Trial of Snap.svg logo hover effect.

Live Demo Source

Pyramid Logo Hover Animation

Pyramid Logo Hover Animation

Tried to make a 3d logo hover effect with CSS.

Live Demo Source

Logo Hover Effects

Logo Hover Effects

Live Demo Source

Logo Hover effect

Logo Hover effect

Live Demo Source

Text Hover Effects Tutorials

Animated Opening Type

Animated Opening Type

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.

Live Demo Source

Text Hover Effects

Text Hover Effects

Having fun with links and data-title. Jquery was used as an example of how it could be applied to other elements you have no control of (e.g. pre-built navigation widget) in order to add a second title hover affect and not worry about using pseudos to create a title for every navigation item manually and individually.

Live Demo Source

Nice CSS3 text hover effect

Nice CSS3 text hover effect

Live Demo Source

Text hover effect

Text hover effect

Live Demo Source

Creative Text hover effects

Creative Text hover effects

Live Demo Source

Text hover effect

Text hover effect

Just playing around with a text hover effect.

Live Demo Source

Tiles with animated :hover

Tiles with animated :hover

Interaction test for a tile based design.

Live Demo Source

How to Create Five Simple Hover Effects for Your Navigation Links

How to Create Five Simple Hover Effects for Your Navigation Links

This is a quick tutorial about creating simple hover effects that would be best suited for links within a navigation. The reason for this is that these might be too much when done inline within a paragraph but that is only a word of caution.

Live Demo Source

Creative Link Effects

Creative Link Effects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

Live Demo Source

Use CSS transitions for link effects

Use CSS transitions for link effects

Bringing hovers back from the vaults, Jenn Lukas explains how to use CSS3 transitions to create fun link effects and enhance user experience.

Source

3D hover effect in CSS

3D hover effect in CSS

Live Demo Source

Creative Link Effects

Creative Link Effects

Live Demo Source

Link Hover Effects

Link Hover Effects

Live Demo Source

Playing with Link Hover Effects

Playing with Link Hover Effects

Live Demo Source

Creative Link Effects #2

Creative Link Effects #2

Live Demo Source

Creative Link Effects #3

Creative Link Effects #3

Live Demo Source

Link Hover Effect

Link Hover Effect

Some way of displaying an inline link that has a different interaction that the usual stuff.

Live Demo Source

Link Hover Effect #2

Link Hover Effect #2

Currently working on a little link hover effect for a clients site.

Live Demo Source

Creative Link Effects #4

Creative Link Effects #4

Live Demo Source

Creative Link Effects #5

Creative Link Effects #5

Live Demo Source

Creative Link Effects #6

Creative Link Effects #6

Live Demo Source

Creative Link Effects #7

Creative Link Effects #7

Live Demo Source

Link hover

Link hover

Live Demo Source

Link hover

Link hover

Live Demo Source

link hover 6

link hover 6

Live Demo Source

Link text slide up and down

Link text slide up and down

Live Demo Source

link hover

link hover

Live Demo Source

link hover

link hover 7

Live Demo Source

Link hover 8

Link hover 8

Live Demo Source

Link hover 7

Link hover 7

Live Demo Source

Image Link Hover Circle

Image Link Hover Circle

Live Demo Source

Link Hover Effect #2

Link Hover Effect #2

Live Demo Source

Social Link Hover Hinge Effect

Social Link Hover Hinge Effect

Live Demo Source

Links hover gradient effect

Links hover gradient effect

Gradient effect on hovering over a link.

Live Demo Source

SVG Hover Effects Tutorials

Creating a Border Animation Effect with SVG and CSS

Creating a Border Animation Effect with SVG and CSS

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

Live Demo Source

Shape Hover Effect with SVG

Shape Hover Effect with SVG

In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.

Live Demo Source

2. Hover Effect Plugins

jQuery Hover Plugin

Adipoli jQuery Image Hover Plugin

Adipoli jQuery Image Hover Plugin

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

Live Demo Download

Flip jQuery Plugin

Flip jQuery Plugin

A lightweight jQuery plugin to create 3d flip animation.

Live Demo Download

Swish jQuery Zoom Hover Effect Plugin

Swish jQuery Zoom Hover Effect Plugin

A swish jQuery zoom hover effect plugin which you can use to add a great effect to things such as portfolio item’s.

Live Demo Download

AnythingZoomer jQuery Plugin

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

Live Demo Download

Zoome – jQuery Image Zoom Effect Plugin

Zoome - jQuery Image Zoom Effect Plugin

Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel.

Live Demo Download

HoverPulse jQuery Plugin

HoverPulse jQuery Plugin

This pages demonstrates a little plugin called ‘hoverpulse’ which grows and then restores an element’s size in response to the mouse hovering over it.

Live Demo Download

Animated jQuery Content Hover Effect Plugin

Animated jQuery Content Hover Effect Plugin

Content Hover is a jQuery plugin for creating an animated content overlay covering an Html element when mouse hovers over it. Comes with some useful options to set the animations, directions, positions and more. Great for creating amazing image caption hover effects to reveal the more details of the image/content.

Live Demo Download

hoverIntent jQuery Plug-in

hoverIntent jQuery Plug-in

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.

Live Demo Download

Hover Captions (HCaptions) jQuery plugin

Hover Captions (HCaptions) jQuery plugin

Hover Captions (here in after: HCaptions) is a jQuery plugin that enables you to display caption overlays with cool effects over images, div’s, etc..

Live Demo Download

jQuery.aim Plugin

jQuery.aim Plugin

jQuery plugin which guesses which element user is going to be hovered/clicked.

Live Demo Download

Slickhover jQuery plugin

Slickhover jQuery plugin

Slickhover.js is a lightweight useful jQuery plugin that produces a slick and smooth hover effect that fades out images and shows a custom icon when a user hovers over an image.

Live Demo Download

randomizeColor jQuery plugin

randomizeColor jQuery plugin

randomizeColor is a jQuery plugin to randomize the text and / or background color on mouse over.

Live Demo Download

jQuery ContentHover Plugin

jQuery ContentHover Plugin

A jQuery plugin that shows hidden content on top of an element when the mouse hovers over it.

Live Demo Download

Hovercard jQuery Plugin

Hovercard jQuery Plugin

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.

Live Demo Download

jquery.MyFadeOverImage.js

jquery.MyFadeOverImage.js

This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.

Download

Mate Hover jQuery Plugin

Mate Hover jQuery Plugin

Mate Hover is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

Live Demo Download

Zalki Hover Image – Plugin jQuery

Zalki Hover Image - Plugin jQuery

Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container.

Live Demo Download

HoverEx – jQuery image hover animation plugin

HoverEx - jQuery image hover animation plugin

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.

Live Demo Download

hoverOver – jQuery Plugin for Adding Hover Content

hoverOver - jQuery Plugin for Adding Hover Content

hoverOver plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content.

Live Demo Download

BloxHover – jQuery Image Hover Effects

BloxHover - jQuery Image Hover Effects

BloxHover is a simple jQuery plugin that animates overlay on images in 10 different effects. You can put any HTML content in the overlay. It’s structure is simple and it’s very flexible.

Live Demo Download

jQuery Hotspot Plugin with Slideshow

jQuery Hotspot Plugin with Slideshow

You can use this jQuery Hotspot Plugin in a product introduction or image showcase, which support the auto delay slideshow and can trigger by click or hover. Works fine in the mobile device like iPhone or iPad too.

Live Demo Download

jQuery Hover Cards

jQuery Hover Cards

jQuery Hover Cards is a lightweight plugin that gives you the power to create beautiful and interactive hover effects for your images and thumbnails the differ depending on the direction the image was hovered.

Live Demo Download

SlipHover

SlipHover

SlipHover apply direction aware hover animation for the caption of an image.

Live Demo Download

Hoverizr

Hoverizr

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.

Live Demo Download

jQuery PowerTip

jQuery PowerTip

PowerTip is a jQuery tooltip plugin with some advanced features like hover intent testing, tooltip queueing, and support for complex data. It also has that rarest of features in jQuery plugins, it’s not abandonware.

Live Demo Download

HoverScroll jQuery Plugin

HoverScroll jQuery Plugin

jQuery plugin for scrolling through a list by hovering the mouse over it.

Live Demo Download

JQuery Tooltip Plugin

JQuery Tooltip Plugin

A JQuery tooltip plugin that easily adds tooltip interaction to HTML element that requires a bit more information than a title attribute.

Live Demo Download

JQuery hover caption plugin

JQuery hover caption plugin

Simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image.

Live Demo Download

jquery.hoverGrid

jquery.hoverGrid

A simple, lightweight jQuery plugin for creating a grid of images which when hovered reveals a caption.

Live Demo Download

pixelate.js

pixelate.js

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

Live Demo Download

jquery-hover-dropdown-box.js

jquery-hover-dropdown-box.js

The jQuery plugin that provides interactive drop-down list box.

Live Demo Download

Hovercolor.js

Hovercolor.js

Simple jQuery plugin for recolouring images on hover.

Live Demo Download

jQuery HoverCrossfade

jQuery HoverCrossfade

The HoverCrossfade plugin for jQuery is made for changing default hover effects of links or buttons. It’s based on the “background-image” attribute and simply crossfades between two images. When applying the plugin to an element, two additional containers are created in order to make the effect work.

Live Demo Download

FloatingTips

FloatingTips

A Mootools plugin for creating floating balloon tips that nicely appears when hovering an element. High customizable using options (tooltip position, centering, arrow size, distance, animation, etc).

Live Demo Download

Leaflet.TouchHover

Leaflet.TouchHover

A plugin for adding hover-like interaction to Leaflet maps on mobile devices.

Live Demo Download

raphael.set.hoverset

raphael.set.hoverset

plugin extending the Set object with global mouse over/out events – suppresses over/out events when mousing over overlapping children in a set.

Live Demo Download

ImageOnHover

ImageOnHover

ImageOnHover is jQuery plugin that help you to show image on hovering a link. It’s just like fancybox or something like that, except you don’t need to click.

Live Demo Download

jQuery CSS3 Hover Transform Plugin

jQuery CSS3 Hover Transform Plugin

A lightweight (2kb min) jQuery Plugin which handles CSS3 hover tranforms that work cross browser IE8+. Works on all modern browsers Chrome, Firefox, Safari, IE. Old browsers IE9, IE8.

Live Demo Download

jQuery Image Hover Move

jQuery Image Hover Move

simple and practical navigation or featured image jQuery plugin.

Live Demo Download

Accelerated Hover Scroll

Accelerated Hover Scroll

Horizontal, accelerating hover-scroll plugin for jQuery.

Live Demo Download

videojs-progressTips

videojs-progressTips

video.js plugin to display the time on hover of the progress bar.

Download

jQuery CSS3 Image Hover Effects

jQuery CSS3 Image Hover Effects

CSS3 Image Hover Effects is a jQuery plugin by Fusiondevs.com for adding superb hover effects to your website’s images. Perfect for using on banners, advertisements and custom buttons.

Live Demo Download

jRumble

jRumble

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

Live Demo Download

showOnHover.js

showOnHover.js

Simple small 1 kb jQuery Plugin for create a hover effect.

Live Demo Download

Hover Panels

Hover Panels

Hover Panels is a simple jQuery plugin I developed several years ago for allowing different content to be shown when the user hovers over an element.

Live Demo Download

jquery-hovercap

jquery-hovercap

jQuery-Hovercap is the jQuery plugin that display caption overlays over images.

Live Demo Download

jquery-big-image.js

jquery-big-image.js

A plugin for hover image zooming that doesn’t suck.

Live Demo Download

Ractive.js hover event plugin

Ractive.js hover event plugin

The hover event provides a convenient way to trigger behaviours when the user’s mouse enters or leaves an element.

Live Demo Download

HoverImageEnlarge.js

HoverImageEnlarge.js

A jQuery plugin to get a nice enlarge effect when you hover images.

Live Demo Download

jQuery.hoverDelay.js

jQuery.hoverDelay.js

hoverDelay.js is a small and useful jQuery plugin that provides the very commonly wanted effect of “hover”, but with configurable delay in the “in” and “out” events.

Live Demo Download

jQuery socialpic Plugin

jQuery socialpic Plugin

A jquery plugin to share images on social media from your website. Users will be able to hover over an image on your site and share the image on popular social media platforms.

Live Demo Download

WordPress Hover Plugin

Aero Pro – CSS3 Hover Effects

Aero Pro - CSS3 Hover Effects

Live Demo Source

Amazing Image Hover Effects

Amazing Image Hover Effects

Amazing Image Hover Effects is Purely CSS3 based amazing plugin that will allow user to add 30+ beautiful hover effects to images with captions.

Live Demo Source

Image Hover Effects

Image Hover Effects

Image Hover Effects is an amazing plugin that will allow user to add 40+ hover effects to images with captions.

Live Demo Source

Image Caption Hover Effects

Image Caption Hover Effects

Image Caption Hover Effects is a Multi Purpose WordPress Plugin to display Images and Captions with 70+ CSS3 Animations. Responsive Grid for Images along with Pop Up Support.

Live Demo Source

Royal Image hover effects

Royal Image hover effects

Royal Image Hover Effects is an impressive, lightweight, responsive Image hover effects. Fully powered by pure CSS3. Apply Royal Image hover effects on your website without any CSS coding knowledge.

Live Demo Source

Ultimate Hover Effects

Ultimate Hover Effects

Ultimate Hover Effects WordPress is impressive modern, yet stylish hover effects for image captions.

Live Demo Source

RD Hover Effects

RD Hover Effects

RD Hover Effects WordPress Plugin is an impressive hover effects powered by pure CSS3. Easy to use the beautiful, amazing Image Hover Effects for your website.

Live Demo Source

Exclusive Hover effects

Exclusive Hover effects

Exclusive Hover effects have few hover effects on images, buttons for make your website stunning and beautiful.

Live Demo Source

Vubon Hover Effects WordPress

Vubon Hover Effects WordPress

Vubon Hover Effects WordPress Plugin is an impressive hover effects powered by pure CSS3 techniques including 3D translate and Great amazing Hover elements. Easy to use the beautiful amazing Image Hover Effects for your website.

Live Demo Source

Image Caption Hover Effects

Image Caption Hover Effects

Image Caption Hover Effects is a Multi Purpose Plugin to displays Images and Captions with 70+ CSS3 Hover Animations. Responsive Grid for Images along with Pop Up Support.

Live Demo Source

Original Css3 Image Hover Effects

Original Css3 Image Hover Effects

Original Css3 Image Hover Effects Is Fully Responsive & Mobile Optimized Css3 Hover Effects for your wordpress site. This Plugin created using only pure CSS3 properties. No JavaScript. Easy to use the amazing Image Hover Effects for your website.

Live Demo Source

Hover Effects Builder – WordPress Plugin

Hover Effects Builder - WordPress Plugin

Live Demo Source

Image Caption Hover

Image Caption Hover

Add images anywhere in your site with 60+ caption hover effects. It is Simple and Flexible.

Live Demo Source

Caption Pro – Image Caption WordPress Plugin

Caption Pro – Image Caption WordPress Plugin

Caption Pro is a next generation Image caption wordpress plugin. Captions pro plugin will allow you to add fantastic captions to your WordPress Images. It allow you to choose predefined 14 caption styles, it has flexible typography options, you can use Google Fonts, as well as change their sizes, colors, spacing and their font-family.

Live Demo Download

Amazing Hover Effects WordPress Plugin

Amazing Hover Effects WordPress Plugin

Amazing Hover Effects is an impressive hover effects collection, powered by pure CSS3 and iHover, no dependency. 55+ effects to choose and 3 styles.

Live Demo Download

Hover Effects Pack – WordPress Plugin

Hover Effects Pack - WordPress Plugin

This hover effects pack plugin allows you to add image via shortcode, and set hover animation, text animation and text delay. This plugin adds new button to you WYSIWYG editor and options page, where you can select colors for color layer and text.

Live Demo Download

Magic Hover – WordPress plugin

Magic Hover - WordPress plugin

This plugin allows you to add images with additional effects and layers, that appear when user hovers mouse over image. There is 3 kind of layers – Image itself, text and hover. You can use unlimited Text and Hover layers for each image.

Live Demo Download

Mate Hover Reload WordPress Plugin

Mate Hover Reload WordPress Plugin

Mate Hover is a WordPress plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

Live Demo Download

WordPress Hover Image & Content Tooltip Plugin

WordPress Hover Image & Content Tooltip Plugin

A versatile WordPress hover and click tooltip plugin for displaying custom HTML contents with CSS3 effects and jQuery animation. This WP image, contents, shortcode, tooltip plugin enables your website to display related information on keywords, links, Images, labels, simply.

Live Demo Download

Image Hover View Woocommerce

Image Hover View Woocommerce

Image Hover View plugin allows to view products quickly anywhere on your site as list image category or thumb images. Especially with Image Hover View you can config any image size to show which allows to see the product images clearly the most, so you easily bring your products closer to customers.

Live Demo Download

WordPress Image Hover Showcase

Wordpress Image Hover Showcase

Increase social sharing to boost your website traffic with WordPress Image Hover Showcase. This plugin allows you to easily add social share icons on every images you’ve added via wordpress editor.

Live Demo Download

Social Image Hover for WordPress

Social Image Hover for WordPress

Social Image Hover for WordPress combines all of the web’s most popular social services into one easy to use plugin. Social Image Hover allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, and Google Plus.

Live Demo Download

Anyhover Image Effects

Anyhover Image Effects

WordPress Plugin – Anyhover Image Effects allows user to add multiple on hover effects to their images using standard WP media tool. This plugin has got 4 starting effects and 16 hover effects so in combination this plugin delivers users 64 cool effects for their images!

Live Demo Download

WP Easy Social Hover

WP Easy Social Hover

WordPress Plugin – Easy Social Hover allows users to add multiple on hover effects with Social Network Sharing buttons to their images using standard WP media tool. Add Facebook Share, Twitter, Pinterest, LinkedIn and GooglePlus sharing to your Images with a Style!

Live Demo Download

Smart Grid Gallery – Responsive WP Gallery Plugin

Smart Grid Gallery - Responsive WP Gallery Plugin

Responsive WordPress grid gallery plugin to create dynamic images grids with lightboxes, CSS3 animations and support for YouTube and Vimeo videos. Turn any WordPress shortcode into dynamic grid gallery with many options. Yes, it is responsive and touch friendly.

Live Demo Download

WordPress Image Hover Effect Plugin

WordPress Image Hover Effect Plugin

Fancy jQuery and CSS3 driven animations to display inside a box. No coding experience needed – WYSIWYG.

Live Demo Download

Kings Caption Hover

Kings Caption Hover

This plugin will add multiple awesome responsive hover effects for the captions of your portfolio/ gallery items in your WordPress site using shortcodes and custom post.

Download

Bootstrap Hover Plugin

Bootstrap: Dropdown on Hover Plugin

Bootstrap: Dropdown on Hover Plugin

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

Live Demo Download

3. CSS3 Hover Effect

Hover.css

Hover.css

hover.css is a collection of CSS3 hover effects that can be easily applied to your own website’s elements, such as links, buttons, logos, SVG, and featured images. Available in CSS, SASS, and LESS.

Live Demo Download

tFigure – Image Captions

tFigure - Image Captions

Small collection of 5 CSS-only animated Image Captions. This kit stuff will save you a lot of time when creating websites! They’re really easy to use and have very nice interfaces.

Live Demo Download

CSS3 Hover Effects

CSS3 Hover Effects

Live Demo Download

HoverMe – Collection of CSS3 Hover Effects

 HoverMe - Collection of CSS3 Hover Effects

This collection of CSS3 Hover Effects is a simple and effective solution to add some nice features to your website using CSS3 features. It’s made with CSS / XHTML only, there is absolutely NO javascript.

Download

CSS3 Image Hover Effects

CSS3 Image Hover Effects

This set of 17 Image Hover Effects uses some of the best and newest CSS3 features to showcase your images in a unique way.

Download

Advanced CSS3 Hover Effects 2

Advanced CSS3 Hover Effects 2

More Advance Hover Effects with 10 new hover effects using CSS3 Keyframes. Very easy to use, alter and ready to go. There is no JavaScript and no JQuery in the code only CSS3 and HTML.

Download

CSS3 Shadow Hover Effects

CSS3 Shadow Hover Effects

Easy to use the beautiful Shadow Hover Effects for their own website. Simply insert into the existing CSS file and enjoy the new Shadow Hover Effects.

Download

CSS3 Shadow Hover Effects

CSS3 Shadow Hover Effects

More Advance Hover Effects with 10 new hover effects using CSS3 keyframes, filters, transitions along with transition and animation delays to help with a timing structure. Very easy to use, alter and ready to go.

Download

CSS3 Image Hover Effects – Pure CSS

CSS3 Image Hover Effects - Pure CSS

Easy to use the beautiful Image Hover Effects for their own website. Simply insert into the existing CSS file and enjoy the new Image Hover Effects.

Download

Advanced CSS3 Hover Effects 5 w/ Banners

Advanced CSS3 Hover Effects 5 w/ Banners

More Advance Hover Effects with new hover effects using CSS3 keyframes, filters, transitions along with transition and animation delays to help with a timing structure. The images that are used are sprite images.

Download

Killer CSS3 Image Hover Effects

Killer CSS3 Image Hover Effects

22 Different Image hover effects using just CSS3. These effects will give your images and thumbnails a unique and modern effect.

Download

CSS3 Image Hover Effects Vol.2

CSS3 Image Hover Effects Vol.2

14 effects contains a full range of awesome stuff to showcase your work in a modern and different way.

Download

CSS3 Image – Text Hover Effects

CSS3 Image - Text Hover Effects

Live Demo Download

CSS3 Hover Effect Transitions, Transformations, Animations

CSS3 Hover Effect Transitions, Transformations, Animations

This post is all about CSS3 effect examples. We’re going to find out more about hover effect transitions, transformations and animations. All of them come with visual examples.

Download