"Smooth animated thumbnails"
Bootstrap 3.1.0 Snippet by krishna1217

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> <br><img style="width: 140px;height: 140px;" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12112423_1196498457044080_5202483879837410766_n.jpg?oh=55f2a5a499d2af07988a858a8bd03d33&oe=56897CB6" alt="..." class="img-rounded"> </div> </div>
.row { margin: 80px 0px 80px 0px; } img { margin: 10px 10px 10px 10px; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); transition-duration: 0.3s; -webkit-transition-duration: 0.3s; /* Safari */ } img:hover { cursor: pointer; -webkit-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); transition-duration: 0.3s; -webkit-transition-duration: 0.3s; /* Safari */ box-shadow: 10px 10px 5px #888888; z-index: 1; }

Related: See More


Questions / Comments: