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:

Random Post