<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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" > <div class="container"> <ul> <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a><div class="text">facebook</div></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a><div class="text">twitter</div></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a><div class="text">google-plus</div></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a><div class="text">linkedin</div></li> <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a><div class="text">skype</div></li> </ul> </div>

body { margin:0; padding:0; font-family:verdana; background: #ff0175; } ul { margin:0; padding:0; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display: flex; } ul li { position: relative; list-style: none; text-align: center; width: 80px; cursor: pointer; } ul li .text { position: absolute; width: 0; left: 50%; margin-top: 10px; margin-left: 0; transition: 1s; overflow: hidden; white-space: nowrap; font-size: 18px; color: #fff; } ul li .fa { font-size: 2em; color: #fff; } ul li:hover .text { width: 120px; margin-left: -60px; }