"Smooth animated thumbnails"
Bootstrap 3.1.0 Snippet by mallakimahdi

<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 src="http://pixdaus.com/files/items/pics/9/0/201900_b2c5ca2717cc93a46808c81d209c700d_mdsq.jpg" height="150px" alt="..." class="img-rounded"> <img src="http://www.public-domain-photos.com/free-stock-photos-4-big/insects/green-bug-on-flover.jpg" height="150px" alt="..." class="img-rounded"> <img src="http://pixdaus.com/files/items/pics/9/0/201900_b2c5ca2717cc93a46808c81d209c700d_mdsq.jpg" height="150px" alt="..." class="img-rounded"> <img src="http://www.public-domain-photos.com/free-stock-photos-4-big/insects/green-bug-on-flover.jpg" height="150px" alt="..." class="img-rounded"> <img src="http://pixdaus.com/files/items/pics/9/0/201900_b2c5ca2717cc93a46808c81d209c700d_mdsq.jpg" height="150px" 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 { position: relative; 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: