<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 ----------> <div class="container"> <div class="row"> <h2 class="text-center">Social icon Rotator</h2> <div class="social"> <ul class="social_icons text-center"> <li class="facebook"><a href="#">facebook</a></li> <li class="twitter"><a href="#">twitter</a></li> <li class="insta"><a href="#">insta</a></li> <li class="youtube"><a href="#">youtube</a></li> <li class="pin"><a href="#">pintrest</a></li> </ul> </div> </div> </div>

/*Social Widget*/ .social ul.social_icons li { display: inline-block; } .social ul.social_icons li a{ width: 30px; height: 30px; font-size: 0px; background: url(http://i.imgur.com/MkUfchL.png) no-repeat; margin-top: 4px; display:block; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; } .social ul.social_icons li.facebook a:hover{ background-position: 0 -33px; } .social ul.social_icons li.twitter a{ background-position:-33px 0; } .social ul.social_icons li.twitter a:hover{ background-position:-33px -33px; } .social ul.social_icons li.insta a{ background-position: -66px 0; } .social ul.social_icons li.insta a:hover{ background-position: -66px -33px; } .social ul.social_icons li.youtube a { background-position: -99px 0; } .social ul.social_icons li.youtube a:hover { background-position: -99px -33px; } .social ul.social_icons li.pin a { background-position: -132px 0; } .social ul.social_icons li.pin a:hover { background-position: -132px -33px; }