<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"> <div class="col-md-10"> <h2 class="heading">Animated Social Share Icons</h2> <a href="javascript::;"><div class="twitter-hover social-slide"></div></a> <a href="javascript::;"><div class="facebook-hover social-slide"></div></a> <a href="javascript::;"><div class="google-hover social-slide"></div></a> <a href="javascript::;"><div class="linkedin-hover social-slide"></div></a> <a href="javascript::;"><div class="pinterest-hover social-slide"></div></a> <a href="javascript::;"><div class="instagram-hover social-slide"></div></a> <a href="javascript::;"><div class="tumblr-hover social-slide"></div></a> <a href="javascript::;"><div class="reddit-hover social-slide"></div></a> <a href="javascript::;"><div class="stumbleupon-hover social-slide"></div></a> </div> </div> </div>

.heading { border-bottom:3px solid #ddd; } .twitter-hover { background-image: url('https://lut.im/SRoUJUn7V4/cORSlFIVBlR7M8Zv.png'); } .facebook-hover { background-image: url('https://lut.im/9LlTfOBMjB/ccPwdiudyoF3x1wE.png'); } .google-hover { background-image: url('https://lut.im/qGelLnYHZ3/dL1Hrnzyl7cMz14e.png'); } .linkedin-hover { background-image: url('https://lut.im/JNIybEyJDx/6gAE6YPt35e7qMAB.png'); } .pinterest-hover { background-image: url('https://lut.im/fU1GnJ1cOw/d0iRmklZgk2l6o5W.png'); } .instagram-hover { background-image: url('https://lut.im/0LARg4VaCM/bWRJ8RbjK0r14RdO.png'); } .tumblr-hover { background-image: url('https://lut.im/wJDqfDmhLL/YZoci8VwKz37qwv4.png'); } .reddit-hover { background-image: url('https://lut.im/zfzy0kvZKw/BJBLoz6FyoLLFZGg.png'); } .stumbleupon-hover { background-image: url('https://lut.im/sdOPL3LP6d/VMRYTaE6cZxHa3Hq.png'); } .social-slide { height: 48px; width: 48px; margin: 10px; float: left; -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-slide:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); }