<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> <div class="col-md-3 box"> <img src="https://place-hold.it/300x300&text=Hardik%20Trivedi" class="img-responsive"> <div class="detail"> <div class="content"> <h2>Hardik trivedi</h2> <p>please share comment and like this</p> </div> </div> </div> </div> </div> </div>

body { margin: 0; padding: 0; background: #262626; font-family: sans-serif; } .container { background: #fff; margin: 70px auto; } .row { margin-top: 20px; margin-bottom: 20px; } .box { position: relative; overflow: hidden; margin-bottom: 10px; } .box img { max-width: 100%; transition: transform 2s; } .box > img:hover { transform: scale(1.2); } .box .detail { position: absolute;; top: 15px; bottom: 15px; left: 30px; right: 30px; background: rgba(0,0,0,0.8); transform: scaleY(0); transition: transform .5s; } .box:hover >.detail { transform: scaleY(1); } .box .detail .content { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; padding: 15px; color: #fff; } .box .detail .content h2 { margin: 0; padding: 0; font-size: 20px; color: #ff0; text-transform: uppercase;; } .box .detail .content p { margin: 10px 0 0; padding: 0; font-size: 12px; text-transform: uppercase;; }