<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"> <h3>Thumbnail Images</h3> <div class="row"> <div class ="col-md-3 zoom col-centered"> <img class="thumbnail" class="img-responsive" src="https://kravelindo-adventure.com/wp-content/uploads/2015/08/junior-4-930x310-300x100-300x100.jpg"> </div> <div class ="col-md-3 zoom col-centered"> <img class="thumbnail" class="img-responsive" src="https://kravelindo-adventure.com/wp-content/uploads/2015/08/junior-4-930x310-300x100-300x100.jpg"> </div> <div class ="col-md-3 zoom col-centered"> <img class="thumbnail" class="img-responsive" src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div> </div> </div> </div>

/**THE SAME CSS IS USED IN ALL 3 DEMOS**/ /**gallery margins**/ ul.gallery{ margin-left: 3vw; margin-right:3vw; } .zoom { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .zoom:hover, .zoom:active, .zoom:focus { /**adjust scale to desired size, add browser prefixes**/ -ms-transform: scale(1.5); -moz-transform: scale(15); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); position:relative; z-index:100; } /**To keep upscaled images visible on mobile, increase left & right margins a bit**/ @media only screen and (max-width: 768px) { ul.gallery { margin-left: 15vw; margin-right: 15vw; } /**TIP: Easy escape for touch screens, give gallery's parent container a cursor: pointer.**/ .DivName {cursor: pointer} } } .title { width:100%; height:10%; background-color: #00ff00; } .col-centered{ display: table; margin: auto; } .thumbnail { width:300px; height:100px; }