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.

1. Freezeframe.js

Freezeframe.js is a library that pauses animated.gifs and allows them to animate in response to mouse hover, mouse click, or touch events, or when manually activated.

Freezeframe.js

Demo

Download


2. Hover effect

Javascript library to draw and animate images on hover.

Hover effect

Demo

Download


3. jQuery Hover3d

jQuery Hover3d is a simple hover script that allows you to create a three-dimensional hover effect. Back in 2015, I was experimenting with CSS3 3d transforms on the Codepen 3D hover plane effect.

The concept is to utilize CSS3 transform to turn the element into 3d space, play with translateZ to space the elements, and detect mouse movement to adjust the transform value.

jQuery Hover3d

Demo

Download


4. SlipHover

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

SlipHover

Demo

Download


5. Izmir

Izmir is a little CSS library that lets you generate gorgeous picture hover elements quickly. Izmir gives you absolute freedom and practically limitless possibilities with to a plethora of styling classes and custom settings. Simply add the element markup along with the style classes of your choosing to custom construct your own picture hover effect by loading the CSS library into your project.

Izmir

Demo

Download


6. imagehover.css

A Lightweight and Scalable Image Hover CSS Library. Imagehover.css is a carefully developed CSS package that makes it simple to create scaleable image hover effects. Choose from over 40 hover effect classes in a CSS library that is only 19KB when minified.

imagehover

Demo

Download


7. CSS Wand

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

Features

  • Easy Copy-Paste Beautiful CSS.
  • Amazing Built-in Color Picker
  • Includes Hover, Loading and more effects.
CSS Wand

Demo

Download


8. Tilt.js

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Tilt.js

Demo

Download


9. Direction Reveal

A plugin that identifies the direction in which a user enters or exits an element and allows you to show or conceal content based on that direction.

Direction Reveal

Demo

Download


10. ihover

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

ihover

Demo

Download


11. Hover Buttons

Hover Transition CSS/SCSS Buttons

Hover Buttons

Demo

Download


12. Mocassin.css

Mocassin.css is a responsive collection of hover effects for Captions, powered by Sass. Each caption is adapt the size of the image.

Mocassin

Demo

Download


13. Image Hover Bootstrap

html and css code for image hover effects with or without bootstrap

Have tested all individually in codepen using bootstrap.

Image Hover Bootstrap

Demo

Download


14. Simple Hover Gallery

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

Simple Hover Gallery

Demo

Download


15. Hover.css

Hover effects driven by CSS3 that may be applied to links, buttons, logos, SVG, featured pictures, and more. Apply to your own elements, edit, or use as a source of inspiration. CSS, Sass, and LESS are all supported.

Hover

Demo

Download


Also Check:

Happy Coding….

About us: Codelivly is a platform designed to help newbie developer to find the proper guide and connect to training from basics to advance

Leave a Comment