15+ Javascript & CSS Libraries for Stunning Hover Animations

The role of hover animation goes well beyond that of being a mere piece of decoration. So in this post I’ve collected 15 Javascript Libraries for Stunning Hover Animations that you can use it to guide web visitors’ attention.

Puffin.js

A new way to hover images.

Puffin.js

Freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.

Freezeframe.js

Hover Effect

Javascript library to draw and animate images on hover.

Hover Effect

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

Hover3d

SlipHover

Apply direction aware animation to images caption.

SlipHover

Imagehover.css

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

Imagehover.css

Tilt.js

A tiny 60+fps parallax tilt hover effect for jQuery.

Tilt.js

Hover Buttons

Animated CSS/SCSS Buttons.

Hover Buttons

Ihover

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

Ihover

Izmir

Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites. Simply load the CSS library in to your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.

Izmir

Csswand

Hover your wand and use your magic spell to copy beautiful css.

Csswand

Mocassin.css

Mocassin.css is a responsive collection of hover effects for Captions.

Mocassin.css

Direction Reveal

Direction aware content reveals via hover or tab on an element.

Direction Reveal

Simple Hover

Simple Hover is a small gallery like showcase with different info card hover variations.

Simple Hover

Bootstrap Image Hover

Image hover effects that work with or without bootstrap.

Bootstrap Image Hover

Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover

0 Comments

  1. David Ryansays:

    Nice Post.Thanks for sharing it.

  2. Interesting!

  3. Alex Smithsays:

    Very useful post for developers. Thanks for sharing this.

  4. Thanks for sharing !

  5. Useful Post. keep it up.Thanks for sharing.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.