<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="my-list"> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <h3>Paris</h3> <span>RS:45K</span> <span class="pull-right">SKU:100022</span> <div class="offer">Extra 5% Off. Cart value Rs 500</div> <div class="detail"> <p>Book in 300</p> <img src="http://hpservicecenterschennai.in/images/hp_laptop_service_centers_in_guindy.png" alt="dsadas" /> <a href="#" class="btn btn-info">Book Now</a> <a href="#" class="btn btn-info">Details</a> </div> </div> </div>

img{max-width:100%;} *{transition: all .5s ease;-moz-transition: all .5s ease;-webkit-transition: all .5s ease} .my-list { width: 100%; padding: 10px; border: 1px solid #f5efef; float: left; margin: 15px 0; border-radius: 5px; box-shadow: 2px 3px 0px #e4d8d8; position:relative; overflow:hidden; } .my-list h3{ text-align: left; font-size: 14px; font-weight: 500; line-height: 21px; margin: 0px; padding: 0px; border-bottom: 1px solid #ccc4c4; margin-bottom: 5px; padding-bottom: 5px; } .my-list span{float:left;font-weight: bold;} .my-list span:last-child{float:right;} .my-list .offer{ width: 100%; float: left; margin: 5px 0; border-top: 1px solid #ccc4c4; margin-top: 5px; padding-top: 5px; color: #afadad; } .detail { position: absolute; top: -107%; left: 0; text-align: center; background: #fff;height: 100%;width:100%; } .my-list:hover .detail{top:0;}