<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a title="Nature Portfolio" class="zoom" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/nature/4" alt="Nature Portfolio" /> <span class="overlay"></span> </a> </div> </div> </article>

.panel { position: relative; overflow: hidden; display: block; border-radius: 0 !important; } .panel-default { border-color: #ebedef !important; } .panel .panel-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; } .panel .panel-body a { overflow: hidden; } .panel .panel-body a img { display: block; margin: 0; width: 100%; height: auto; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .panel .panel-body a.zoom:hover img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } .panel .panel-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: visible; height: 100%; width: 100%; background-color: #000; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -webkit-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; } .panel .panel-body a.zoom:hover span.overlay { display: block; visibility: hidden; opacity: 0; } .panel .panel-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; }