15 Javascript & CSS Libraries for Stunning Hover Animations

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.

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 enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

Demo

Download


2. Hover effect

Javascript library to draw and animate images on hover.

Demo

Download


3. jQuery 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

Demo

Download


4. SlipHover

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

Demo

Download


5. 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.

Demo

Download


6. imagehover.css

A Scaleable & Light Image Hover CSS Library. 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.

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.

Demo

Download


8. Tilt.js

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

Demo

Download


9. Direction Reveal

A plugin that detects the direction a user enters or leaves an element allowing you to reveal or hide content based on this direction.

Demo

Download


10. ihover

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

Demo

Download


11. Hover Buttons

Hover Transition CSS/SCSS 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.

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.

Demo

Download


14. Simple Hover Gallery

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

Demo

Download


15. Hover.css

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.

Demo

Download


Thank for read!

How to Create an Animated Navbar with Html, CSS and JavaScript

How to Create an Animated Navbar with Html, CSS and JavaScript

In this Html, CSS and JavaScript tutorial you will build an animated navbar with Html, CSS and JavaScript. Have you every wanted to create an awesome animated navbar with JavaScript? We will be looking at making a navbar with Html and CSS and then using the intersection observer in JavaScript to help us create this effect.

Javascript Animated Navbar Tutorial

Have you every wanted to create an awesome animated navbar with javascript? no? oh well...this is akward.

All jokes aside we will be looking at making a navbar with html and css and then using the intersection observer in javascript to help us create this effect.

How to Upload CSS Animation with JavaScript

How to Upload CSS Animation with JavaScript

CSS Upload Animation With JavaScript Source Code First I have created the layout by creating the main div and placed other elements inside it. Inside the main div, I have placed a file input, two divs, and two SVG shapes. The first SVG shape is a circle for showing progress and the second one is for tick mark or icon.

How we can create an uploading animation using HTML, CSS, and JS? Solution: See this CSS Upload Animation With JavaScript, Uploading Animation Effect.

Today you will learn to create an Uploading Animation Effect. Basically there is a rounded rectangle with a text “Drop Here” and dark background color. When you will click on the rectangle then your file manager will open to browse or select a file. After selecting any file, you will see circle progress over the rounded-rectangle field after complete progress a tick icon will reveal.

So, Today I am sharing CSS Upload Animation With JavaScript. There I have used pure JavaScript for creating some important functions for the program like drag and drop. And the animation effect is completely based on CSS, there is no library. You can use this animation by integrating with backend for showing actual progress, because it is a dummy.

CSS Upload Animation With JavaScript Source Code

Before sharing source code, let’s talk about it. First I have created the layout by creating the main div and placed other elements inside it. Inside the main div, I have placed a file input, two divs, and two SVG shapes. The first SVG shape is a circle for showing progress and the second one is for tick mark or icon.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave the elements like rectangle, loading icon, and tick icon size by giving width and height. There I have used CSS variables to store values and easy work. In the whole animation, I have mostly used CSS transiton command. And for creating the animation effect I have used @keyframe property.

JavaScript handling here the drag and drop feature. This feature is based on JS dragover command and fetched the upload section using document.querySelector command. Left all other things you will understand after getting the codes, I can’t explain fully in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Upload Animation | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap'>
  <link rel="stylesheet" href="./style.css">
 
</head>
<body>
 
<div class="upload">
  <input type="file" title="" class="drop-here">
  <div class="text text-drop">drop here</div>
  <div class="text text-upload">uploading</div>
  <svg class="progress-wrapper" width="300" height="300">
    <circle class="progress" r="115" cx="150" cy="150"></circle>
  </svg>
  <svg class="check-wrapper" width="130" height="130">
    <polyline class="check" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg>
</div>
 
<script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

body {
  background: #E8EBF3;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload {
  --background: #212121;
  --text-drop: #fff;
  --text-upload: #fff;
  --progress-color: #fff;
  --check-color: var(--text-upload);
  --border-radius: 30px;
  width: 250px;
  height: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--background);
  border-radius: var(--border-radius);
  transition: all .3s ease-out;
  box-shadow: var(--shadow-x, 0px) var(--shadow-y, 1px) var(--shadow-blur, 3px) rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(var(--scale, 1));
          transform: scale(var(--scale, 1));
}
.upload .drop-here {
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: var(--border-radius);
  opacity: var(--opacity, 0);
  overflow: hidden;
  cursor: pointer;
  text-indent: -9999px;
  z-index: 1;
}
.upload .text {
  position: absolute;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}
.upload .text.text-drop {
  color: var(--text-drop);
  opacity: var(--opacity, 1);
  transition: opacity .15s ease-out .15s;
}
.upload .text.text-upload {
  color: var(--text-upload);
  opacity: var(--opacity, 0);
  transition: opacity .15s ease-out;
}
.upload .progress-wrapper {
  position: absolute;
}
.upload .progress-wrapper .progress {
  fill: none;
  stroke: var(--progress-color);
  stroke-width: 3;
  stroke-dasharray: 722;
  stroke-dashoffset: 722;
}
.upload .check-wrapper {
  position: absolute;
  opacity: var(--opacity, 0);
  -webkit-transform: scale(var(--scale, 0.9)) rotate(var(--rotate, 3deg));
          transform: scale(var(--scale, 0.9)) rotate(var(--rotate, 3deg));
  transition: opacity .15s ease-in, -webkit-transform .15s ease-in-out;
  transition: transform .15s ease-in-out, opacity .15s ease-in;
  transition: transform .15s ease-in-out, opacity .15s ease-in, -webkit-transform .15s ease-in-out;
}
.upload .check-wrapper .check {
  width: 100px;
  width: 100px;
  fill: none;
  stroke: var(--check-color);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 0;
  stroke-dashoffset: 100;
}
.upload .shadow {
  opacity: var(--opacity, 0);
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
  -webkit-filter: blur(25px);
          filter: blur(25px);
  z-index: -1;
  transition: all .5s ease;
}
.upload .shadow::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -25%;
  height: 150%;
  width: 150%;
  -webkit-animation: shadow-animate 5s linear infinite;
          animation: shadow-animate 5s linear infinite;
}
.upload.drag {
  --scale: 1.03;
  --shadow-y: 5px;
  --shadow-blur: 20px;
}
.upload.drop .text.text-drop {
  --opacity: 0;
  transition: opacity .15s ease-out;
}
.upload.drop .text.text-upload {
  --opacity: 1;
  transition: opacity .15s ease-out .15s;
}
.upload.drop .shadow {
  --opacity: 1;
}
.upload.drop .progress-wrapper {
  opacity: var(--opacity, 1);
  -webkit-transform: scale(var(--scale, 1)) rotate(var(--rotate, -90deg));
          transform: scale(var(--scale, 1)) rotate(var(--rotate, -90deg));
}
.upload.drop .progress-wrapper .progress {
  -webkit-animation: progress 3s ease .3s forwards;
          animation: progress 3s ease .3s forwards;
}
.upload.done {
  --opacity: 0;
}
.upload.done .text.text-upload {
  --opacity: 0;
}
.upload.done .shadow {
  --opacity: 0;
}
.upload.done .progress-wrapper {
  --scale: .95;
  transition: opacity .3s, -webkit-transform .3s;
  transition: transform .3s, opacity .3s;
  transition: transform .3s, opacity .3s, -webkit-transform .3s;
}
.upload.done .check-wrapper {
  --opacity: 1;
  --scale: 1;
  --rotate: 0deg;
  transition: opacity .5s ease-in .3s, -webkit-transform .5s ease-in-out .3s;
  transition: transform .5s ease-in-out .3s, opacity .5s ease-in .3s;
  transition: transform .5s ease-in-out .3s, opacity .5s ease-in .3s, -webkit-transform .5s ease-in-out .3s;
}
.upload.done .check-wrapper .check {
  -webkit-animation: checkTick .5s ease-in-out .3s forwards;
          animation: checkTick .5s ease-in-out .3s forwards;
}
 
@keyframes progress {
  0% {
    stroke-dashoffset: 722;
  }
  20% {
    stroke-dashoffset: 500;
  }
  50% {
    stroke-dashoffset: 322;
  }
  55% {
    stroke-dashoffset: 300;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
 
@keyframes checkTick {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: 100;
  }
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

var fileUpload = document.querySelector(".upload");
 
fileUpload.addEventListener("dragover", function() {
  this.classList.add("drag");
  this.classList.remove("drop", "done");
});
 
fileUpload.addEventListener("dragleave", function() {
  this.classList.remove("drag");
});
 
fileUpload.addEventListener("drop", start, false);
fileUpload.addEventListener("change", start, false);
 
function start() { 
  this.classList.remove("drag");
  this.classList.add("drop");
  setTimeout(() => this.classList.add("done"), 3000);
}

That’s It. Now you have successfully created CSS Upload Animation With JavaScript, Drag and  Drop Uploading Animation Effect. If you have any doubt or question comment down below.

Thanks for reading!

Stunning Css Card Hover Effect with JavaScript

Stunning Css Card Hover Effect with JavaScript

creative html & css card hover effect with pure javascript this video is how to make a stunning and creative css & html & javacript card hover effects..

creative html & css card hover effect with pure javascript
this video is how to make a stunning and creative css & html & javacript card hover effects
this is one tons of hover effects we will provide
we hope this video helps you making your own stunning hover effects , If you find this video useful, please share it