<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <ul class="gallery_box"> <li> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/28168233_1305672856229344_1115654443543772827_n.jpg?oh=540fc94442733fedb7ac97c22eb9227e&oe=5B4923CC"> <div class="box_data"> <span>Ravi With Bike</span> </div></a> </li> <li> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/28056205_1303275929802370_1527265339381983538_n.jpg?oh=86d98dd4acade9794b0619ddaaf4ae95&oe=5B395D0A"> <div class="box_data"> <span>Ravi Singh</span> </div></a> </li> <li> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/28277284_1312047112258585_7009094528876146584_n.jpg?oh=1ccebd9f2bdb6969362822a659f14517&oe=5B2B0E8E"> <div class="box_data"> <span>White wall</span> </div></a> </li> <li> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/27752140_1302436453219651_2830378499643641157_n.jpg?_nc_cat=0&oh=9c31d1ab6a1a4141dd7387a39d39a817&oe=5B36D5FF"> <div class="box_data"> <span>Green Tree</span> </div></a> </li> <li style=" position: relative; top: -134px;"> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26903908_1287758164687480_4639171229686138684_n.jpg?oh=a42d7c295a490f1f02c22c2c08e92afd&oe=5B342D07"> <div class="box_data"> <span>Blue</span> </div></a> </li> <li> <a href="#0"><img src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26814614_1282677078528922_2540071887548084513_n.jpg?_nc_cat=0&oh=f78acb9333547e360b2ea850db761b5e&oe=5B3AD271"> <div class="box_data"> <span>Ravi</span> </div></a> </li> </ul>

img{ max-width:100%;} .gallery_box li{ width:33.333333%; max-width: 100% ; display:inline-block; float: left; text-align: center; overflow: hidden; position: relative;} .gallery_box{ padding:0;display: flow-root;} .gallery_box li:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .gallery_box li img{-webkit-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease;} .gallery_box li:nth-child(even) { height: 304px; } .gallery_box li:nth-child(odd) { height: 438px; } .gallery_box li:nth-child(odd) .box_data{ background:rgba(0,0,0,0.17) } .gallery_box li:nth-child(even) .box_data{ background:rgba(0,44,255,0.27) } .gallery_box .box_data{ position:absolute; top: 0; left: 0; right:0; bottom:0; color:#fff;} .gallery_box .box_data span{ position:absolute; top: 50%; transform: translateY(-50%); left:0 ; right:0; font-size:24px;} .gallery_box li:hover .box_data{ background:rgba(255,0,39,0.55)}