DMCA.com Follow us on Facebook

10 Top Image Hover Effects Tutorials

Need to spruce up your website with some beautiful animation and transition effects? Here's a FREE collection of superb image hover effects in both pure CSS3 and jQuery. Bring your images to life.

Hover Effects included: Image Zoom, Image Flips, Border Hover, Fading and Sliding Effects, Content Overlays and more...

Each tutorial includes demos and downloadable files.

Caption Hover Effects

How to create some subtle and modern caption hover effects.




Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.

View Tutorial


Direction aware CSS3 Hover Effect with jQuery

Create a direction-aware hover effect using CSS3 and jQuery.




Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.

View Tutorial


Original CSS3 Hover Effects

The power of CSS3 is enormous and in this tutorial we will see how to use it in a very creative way.




In this tutorial learn how to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, some thumbnail description, using a different style in each example. Many different examples presented.

View Tutorial


Circle Hover Effects with CSS Transitions

A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations




In this tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites.

View Tutorial


Animated Text and Icon Menu with jQuery

Learn how to create a slick menu with a nice animation feature on hover.




Make elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

View Tutorial


CSS3 Hover Effects

Beautiful CSS3 Image Effects




This tutorial will show you five examples of CSS3 hover effects using different CSS properties. Please note that the CSS3 effects will only work properly in modern browsers that support the CSS3 properties in use.

View Tutorial


Unique CSS Button Hover Effects

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




This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.

View Tutorial


Icon Hover Effects

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




Here's a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

View Tutorial


3D Thumbnail Hover Effects

A tutorial on how to create 3d thumbnail hover effects with CSS 3d transforms and jQuery.




Learn how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effects. In these examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it.

View Tutorial


jQuery Image Hover Effects




Adipoli is a simple jQuery plugin used to bring stylish hover effects to your images. Includes 6 different effects.

View Tutorial


FREE - CSS3 Buttons


Copyright © 2016 HTML5 Templates Dreamweaver.com