<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/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="item-image-wrapper"> <div class="single-items"> <div class="iteminfo text-center"> <img src="http://demo.themeum.com/html/eshopper/images/home/product1.jpg" alt=""> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> <div class="item-overlay"> <div class="overlay-content"> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li> <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li> </ul> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="item-image-wrapper"> <div class="single-items"> <div class="iteminfo text-center"> <img src="http://demo.themeum.com/html/eshopper/images/home/product1.jpg" alt=""> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> <div class="item-overlay"> <div class="overlay-content"> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li> <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li> </ul> </div> </div> </div> <div class="col-sm-3"> <div class="item-image-wrapper"> <div class="single-items"> <div class="iteminfo text-center"> <img src="http://demo.themeum.com/html/eshopper/images/home/product1.jpg" alt=""> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> <div class="item-overlay"> <div class="overlay-content"> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li> <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li> </ul> </div> </div> </div> <div class="col-sm-3"> <div class="item-image-wrapper"> <div class="single-items"> <div class="iteminfo text-center"> <img src="http://demo.themeum.com/html/eshopper/images/home/product1.jpg" alt=""> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> <div class="item-overlay"> <div class="overlay-content"> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li> <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li> </ul> </div> </div> </div> <div class="col-sm-3"> <div class="item-image-wrapper"> <div class="single-items"> <div class="iteminfo text-center"> <img src="http://demo.themeum.com/html/eshopper/images/home/product1.jpg" alt=""> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> <div class="item-overlay"> <div class="overlay-content"> <h2>$56</h2> <p>Easy Polo Black Edition</p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li> <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li> </ul> </div> </div> </div> </div> </div>

.item-image-wrapper {border: 1px solid #696969; overflow: hidden;margin-bottom: 30px;box-shadow: 3px 3px 5px 6px #ccc;} .single-items {position: relative;} .iteminfo {position: relative;} .iteminfo h2 {color: #FE980F;font-size: 24px; font-weight: 700;} .item-overlay {background: rgba(254, 152, 15, .8);top: 0; display: none;height: 0;position: absolute;-webkit-transition: height 500ms ease 0s;transition: height 500ms ease 0s;width: 100%;display: block;} .overlay-content { bottom: 0; position: absolute; bottom: 0; text-align: center; width: 100%;} .item-overlay h2 {color: #fff;font-size: 24px; font-weight: 700;} .item-overlay p {font-size: 14px;font-weight: 400; color: #fff;} .item-overlay, .add-to-cart {background: #fff; border: 0 none; border-radius: 0; color: #FE980F;font-size: 15px;margin-bottom: 25px;} .choose { border-top: 1px solid #F7F7F0;} .choose ul li a {color: #B3AFA8;font-size: 13px;padding-left: 0;padding-right: 0;} .single-items:hover .item-overlay {display: block; height: 100%; background: rgba(254, 152, 15, .8);} .overlay-content {bottom: 0;position: absolute; bottom: 0; text-align: center; width: 100%;} .iteminfo img { width: 100%;}