To let users be easily and clearly be familiar with the clickable part of webpage is an important part of UX design. The most common way of doing it was to either change the text color or underline it. But, nowadays, with CSS, there are many more ways to deliver hover effects, particularly to images.

CSS is an amazing technology, with its help you can create truly amazing things. Using ‘all that power’ you can add any sorts of visual effects to your resource.

Web Developers can add transition effects or animation when a hover event is triggered. We are looking at directional slides, zooms at different speeds, fade-ins and fade-outs, hinge effects, spotlight reveals, wobbles, bounces and more. Image hovering can be applied to any picture on your blog or site, just add several lines of code to your CSS file. These effects will definitely amaze your visitors. All that is needed is to put the mouse over and the miracle happens.

Image Hover CSS is a lightweight yet robust CSS library helps you create over 40 amazing hover effects on images using HTML5 / CSS /CSS3.

Live Demo

Download

Available hover effects:

• imghvr-fade
• imghvr-push-up
• imghvr-push-down
• imghvr-push-left
• imghvr-push-right
• imghvr-slide-up
• imghvr-slide-down
• imghvr-slide-left
• imghvr-slide-right
• imghvr-reveal-up
• imghvr-reveal-down
• imghvr-reveal-left
• imghvr-reveal-right
• imghvr-hinge-up
• imghvr-hinge-down
• imghvr-hinge-left
• imghvr-hinge-right
• imghvr-flip-horiz
• imghvr-flip-vert
• imghvr-flip-diag-1
• imghvr-flip-diag-2
• imghvr-shutter-out-horiz
• imghvr-shutter-out-vert
• imghvr-shutter-out-diag-1
• imghvr-shutter-out-diag-2
• imghvr-shutter-in-horiz
• imghvr-shutter-in-vert
• imghvr-shutter-in-out-horiz
• imghvr-shutter-in-out-vert
• imghvr-shutter-in-out-diag-1
• imghvr-shutter-in-out-diag-2
• imghvr-fold-up
• imghvr-fold-down
• imghvr-fold-left
• imghvr-fold-right
• imghvr-zoom-in
• imghvr-zoom-out
• imghvr-zoom-out-up
• imghvr-zoom-out-down
• imghvr-zoom-out-left
• imghvr-zoom-out-right
• imghvr-zoom-out-flip-horiz
• imghvr-zoom-out-flip-vert
• imghvr-blur

Preview: