We are giving you demo of font awesome icon hover rounded animation usign html,css,jquery and bootstrap 4. when you hover on icon then icon will Rounded Animation and also icon animated. this is very nice effect with font awesome icon. we are giving you demo of coffee icon, setting icon and uload icon.

We allows to free snippets of round animation css , you can download full code of icon hover animation layout. Here in this post i will give you example of icon hover effects css code snippet and you will get simple code of html, css and jquery. In animated icons css snippet i give you three tab with html, css and js, you can easily get code of icon hover effects bootstrap layout.


<!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="custom.css"> </head> <body> <div class="container"> <div class="row icon-main mt-5"> <div class="col-md-2 offset-md-2 icon-box coffee text-center rounded-circle"> <i class="fa fa-coffee mt-5 icon-coffee" aria-hidden="true"></i> <h6 class="mt-3 font-weight-bold">Coffee</h6> </div> <div class="col-md-2 offset-md-1 icon-box setting text-center rounded-circle"> <i class="fa fa-cog mt-5 icon-setting" aria-hidden="true"></i> <h6 class="mt-3 font-weight-bold">Setting</h6> </div> <div class="col-md-2 offset-md-1 icon-box upload text-center rounded-circle"> <i class="fa fa-upload mt-5 icon-upload" aria-hidden="true"></i> <h6 class="mt-3 font-weight-bold">Upload</h6> </div> </div> </div> </body> </script> </html>
body{ background-color: #F1CDA4; } .icon-main{ color: #555; } .icon-main i{ font-size: 60px; } .icon-box{ height: 180px; max-width: 180px; cursor: pointer; border: 1px solid #FFF; transition: 1s 0s linear; } .change-color{ border: 4px solid #CC0000 !important; color: #CC0000 !important; } .fa-coffee, .fa-cog, .fa-upload{ transition: 1s 0s linear; } .animate-coffee{ -moz-transform: scale(1.2) rotate(-45deg); -webkit-transform: scale(1.2) rotate(-45deg); -o-transform: scale(1.2) rotate(-45deg); -ms-transform: scale(1.2) rotate(-45deg); transform: scale(1.2) rotate(-45deg); } .animate-cog{ transform: scale(1.2); } .animate-upload{ -moz-transform: scale(1.2) translateY(-10px); -webkit-transform: scale(1.2) translateY(-10px); -o-transform: scale(1.2) translateY(-10px); -ms-transform: scale(1.2) translateY(-10px); transform: scale(1.2) translateY(-10px); }
$(document).ready(function() { $(".coffee").on("mouseenter", function() { $('.icon-coffee').addClass('animate-coffee'); $(this).addClass("change-color"); }); $(".coffee").on("mouseleave", function() { $('.icon-coffee').removeClass('animate-coffee'); $(this).removeClass("change-color"); }); $(".setting").on("mouseenter", function() { $('.icon-setting').addClass('fa-spin'); $(this).addClass("change-color"); }); $(".setting").on("mouseleave", function() { $('.icon-setting').removeClass('animate-cog fa-spin'); $(this).removeClass("change-color"); }); $(".upload").on("mouseenter", function() { $('.icon-upload').addClass('animate-upload'); $(this).addClass("change-color"); }); $(".upload").on("mouseleave", function() { $('.icon-upload').removeClass('animate-upload'); $(this).removeClass("change-color"); }); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Register and login form page design with animation using bootstrap

Register and login form page design with animation using boo...

you can get free ragister and login form page design free. register and login fo...

Read More
Pricing table with hover effect using bootstrap example

Pricing table with hover effect using bootstrap example

Nice snippets provide free pricing table code. Bootstrap responsive package pric...

Read More
Signin and signup form page design with animation using bootstrap

Signin and signup form page design with animation using boot...

you can get free sigin and signup form page design free. signup and sigin form d...

Read More

Random Post