<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" /> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="well well-sm"> <div class="media"> <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://critterapp.pagodabox.com/img/user.jpg"> </a> <div class="media-body"> <h4 class="media-heading">First Last Name</h4> <p><span class="label label-info">888 photos</span> <span class="label label-warning">150 followers</span></p> <p> <a href="#" class="btn btn-xs btn-default"><span class="fa fa-comment"></span> Message</a> <a href="#" class="btn btn-xs btn-default"><span class="fa fa-heart"></span> Favorite</a> <a href="#" class="btn btn-xs btn-default"><span class="fa fa-ban"></span> Unfollow</a> </p> <ul class="list-inline"> <li> <a href="#" class="fa-stack fa-lg"> <i class="fa fa-facebook fa-stack-1x off"></i> <i class="fa fa-facebook-square fa-stack-2x on"></i> </a> </li> <li> <a href="#" class="fa-stack fa-lg"> <i class="fa fa-twitter fa-stack-1x off"></i> <i class="fa fa-twitter-square fa-stack-2x on"></i> </a> </li> <li> <a href="#" class="fa-stack fa-lg"> <i class="fa fa-google-plus fa-stack-1x off"></i> <i class="fa fa-google-plus-square fa-stack-2x on"></i> </a> </li> <li> <a href="#" class="fa-stack fa-lg"> <i class="fa fa-linkedin fa-stack-1x off"></i> <i class="fa fa-linkedin-square fa-stack-2x on"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div>

body{padding-top:20px;} .fa-stack { height: 40px; width: 40px; overflow: hidden; } .fa-stack .off, .fa-stack .on { transition: margin-top .2s; } .fa-stack:hover .off { margin-top: -60px; } .fa-stack .on { margin-top: 60px; } .fa-stack:hover .on { margin-top: 0; } .fa-stack:hover .fa-facebook-square { color: #3B5998; } .fa-stack:hover .fa-twitter-square { color: #55acee; } .fa-stack:hover .fa-google-plus-square { color: #d34836; } .fa-stack:hover .fa-linkedin-square { color: #0177B5; }