Table of Contents
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.
2. Hover effect
Javascript library to draw and animate images on hover.
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.
4. SlipHover
SlipHover apply direction aware hover animation for the caption of an image.
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.
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.
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.
8. Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.
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.
10. ihover
iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass.
11. Hover Buttons
Hover Transition CSS/SCSS Buttons
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.
13. Image Hover Bootstrap
html and css code for image hover effects with or without bootstrap
Have tested all individually in codepen using bootstrap.
14. Simple Hover Gallery
Simple Hover is a small gallery like showcase with different info card hover variations.
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.
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
