<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="none" onload="if(media!='all')media='all'""> <div class="container"> <div class="row"> <div class="socialbox"> <ul class="list-inline"> <li><a href="https://facebook.com" title="leslie social link" title="facebook"><i class="fa fa-facebook"></i></a><span class="fb">facebook</span></li> <li><a href="https://twitter.com" title="leslie social link" title="twitter"><i class="fa fa-twitter"></i></a><span>twitter</span></li> <li><a href="https://linkedin.com" title="leslie social link" title="linkedin"><i class="fa fa-linkedin"></i></a><span>linkedin</span></li> <li><a href="https://spotify.com" title="leslie social link" title="spotify"><i class="fa fa-spotify"></i></a><span>spotify</span></li> </ul> </div> </div> </div>

.container { padding-top: 30px; border: thin solid #ddd; min-height: 90px; } .socialbox { max-width: 318px; margin: 0 auto; } .socialbox li { position: relative; font-size: 19px; height: 32px; width: 32px; text-align: center; line-height: 30px; background: #f2f2f2; border: 1px solid #ddd; border-radius: 2px 7px 2px 7px; box-shadow: 0 1px 1px #bbb; cursor: pointer; margin-left: 8px; z-index: 20; } .socialbox li:first-child { margin-left: 0; } .socialbox li span { z-index: 10; font-size: 93.8%; position: absolute; left: -13px; color: rgba(202, 202, 202, .85); -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ -ms-transform: rotate(-45deg); /* IE 9 */ transform: rotate(-45deg); -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; cursor: pointer; } .socialbox span.fb { left: -23px; } .socialbox span:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* Have a Wonderful Time - any help with the z-index would be appreciated larry@tradesouthwest.com */