"icon hover effect"
Bootstrap 4.0.0 Snippet by Reason706

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </div>
body { margin:0; padding:0; } ul { position:absolute; margin:0; padding:0; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; } ul li { list-style:none; } ul li a { position:relative; display:block; width:80px; height:80px; font-size:20px; text-align:center; line-height:80px; color:#262626; overflow:hidden; margin:15px; transform:rotate(45deg); transition:.2s; border:1px solid rgba(0,0,0,1); } ul li a .fa{ transform:rotate(-45deg); font-size: 2rem; } ul li a:before { content:''; position:absolute; bottom:-100%; left:0; width:100%; height:100%; background:#262626; transition:.2s; } ul li a:hover:before { bottom:0; } ul li a:hover { color:#fff; } ul li:nth-child(1) a:before { background:#3b5998; } ul li:nth-child(2) a:before { background:#00aced; } ul li:nth-child(3) a:before { background:#dd4b39; } ul li:nth-child(4) a:before { background:#007bb6; } ul li:nth-child(5) a:before { background:#bc2a8d; }

Related: See More


Questions / Comments: