Icons Hover Effect

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<p>
<i class="fa fa-automobile" style="font-size:36px;"></i>
</p>





</body>
</html>

CSS

body{
   background-color:#000;
  }
  p{
     text-align:center;
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%, -50%);
     width:60px;
     height:60px;
     background:#000;
     border-radius:50%;
     transition:.5s;
  }
  .fa{
    position:absolute;
    left:29%;
    top:50%;
    right:50%;
    transform:translate(-50%, -50%);
  }
  p:before{
     content:'';
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     border-radius:50%;
     background:#ffee10;
     transition:.5s;
     transform:scale(.9);
     z-index:-1;
     cursor:pointer;
     
   }
   .fa:hover{cursor:pointer;}
   p:hover:before{
    transform:scale(1.1);
    
   }