<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="product-page-single"> <div class="single-product-item"> <div class="product-image-wrap"> <a href="product-page.html"><img src="http://www.kevinrobinson.co.uk/images/large/Fashion%20Online/Superdry%20Shirts%20Sale%20Superdry%20Double%20Cloth%20Checked%20Shirt%20Womens%20Malvern%20Check%20Red%20No%20402893%20Superdry%20Women%20Clothing%202404_3_LRG.jpg" alt="Product image"></a> <div class="product-detail-inner"> <div class="item-details-overly-info"> <ul class="list-inline list-unstyled"> <li class="item-add-to-cart"><a href="#" title="Add To Cart"><i class="fa fa-shopping-cart"></i></a></li> <li class="item-wishlist"><a href="#" title="Wish list"><i class="fa fa-heart-o"></i></a></li> <li class="item-like"><a href="#" title="Like"><i class="fa fa-thumbs-o-up"></i></a></li> </ul> </div> </div> </div> <div class="product-item-details"> <h2><a href="#">Defyant Reversible Dot Shorts</a></h2> <div class="price-like-box"> <div class="pull-left item-price"> <span class="old-price"><del>$50.00</del></span> <span class="current-price">$50.00</span> </div> <div class="pull-right item-rating"> <ul class="list-inline"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa-fa-star"></i></li> <li><i class="fa fa-star-o"></i></li> <li><i class="fa fa-star-o"></i></li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-page-single"> <div class="single-product-item"> <div class="product-image-wrap"> <a href="product-page.html"><img src="http://www.kevinrobinson.co.uk/images/large/Fashion%20Online/Superdry%20Shirts%20Sale%20Superdry%20Double%20Cloth%20Checked%20Shirt%20Womens%20Malvern%20Check%20Red%20No%20402893%20Superdry%20Women%20Clothing%202404_3_LRG.jpg" alt="Product image"></a> <div class="product-detail-inner"> <div class="item-details-overly-info"> <ul class="list-inline list-unstyled"> <li class="item-add-to-cart"><a href="#" title="Add To Cart"><i class="fa fa-shopping-cart"></i></a></li> <li class="item-wishlist"><a href="#" title="Wish list"><i class="fa fa-heart-o"></i></a></li> <li class="item-like"><a href="#" title="Like"><i class="fa fa-thumbs-o-up"></i></a></li> </ul> </div> </div> </div> <div class="product-item-details"> <h2><a href="#">Defyant Reversible Dot Shorts</a></h2> <div class="price-like-box"> <div class="pull-left item-price"> <span class="old-price"><del>$50.00</del></span> <span class="current-price">$50.00</span> </div> <div class="pull-right item-rating"> <ul class="list-inline"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa-fa-star"></i></li> <li><i class="fa fa-star-o"></i></li> <li><i class="fa fa-star-o"></i></li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-page-single"> <div class="single-product-item"> <div class="product-image-wrap"> <a href="product-page.html"><img src="http://www.kevinrobinson.co.uk/images/large/Fashion%20Online/Superdry%20Shirts%20Sale%20Superdry%20Double%20Cloth%20Checked%20Shirt%20Womens%20Malvern%20Check%20Red%20No%20402893%20Superdry%20Women%20Clothing%202404_3_LRG.jpg" alt="Product image"></a> <div class="product-detail-inner"> <div class="item-details-overly-info"> <ul class="list-inline list-unstyled"> <li class="item-add-to-cart"><a href="#" title="Add To Cart"><i class="fa fa-shopping-cart"></i></a></li> <li class="item-wishlist"><a href="#" title="Wish list"><i class="fa fa-heart-o"></i></a></li> <li class="item-like"><a href="#" title="Like"><i class="fa fa-thumbs-o-up"></i></a></li> </ul> </div> </div> </div> <div class="product-item-details"> <h2><a href="#">Defyant Reversible Dot Shorts</a></h2> <div class="price-like-box"> <div class="pull-left item-price"> <span class="old-price"><del>$50.00</del></span> <span class="current-price">$50.00</span> </div> <div class="pull-right item-rating"> <ul class="list-inline"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa-fa-star"></i></li> <li><i class="fa fa-star-o"></i></li> <li><i class="fa fa-star-o"></i></li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-page-single"> <div class="single-product-item"> <div class="product-image-wrap"> <a href="product-page.html"><img src="http://www.kevinrobinson.co.uk/images/large/Fashion%20Online/Superdry%20Shirts%20Sale%20Superdry%20Double%20Cloth%20Checked%20Shirt%20Womens%20Malvern%20Check%20Red%20No%20402893%20Superdry%20Women%20Clothing%202404_3_LRG.jpg" alt="Product image"></a> <div class="product-detail-inner"> <div class="item-details-overly-info"> <ul class="list-inline list-unstyled"> <li class="item-add-to-cart"><a href="#" title="Add To Cart"><i class="fa fa-shopping-cart"></i></a></li> <li class="item-wishlist"><a href="#" title="Wish list"><i class="fa fa-heart-o"></i></a></li> <li class="item-like"><a href="#" title="Like"><i class="fa fa-thumbs-o-up"></i></a></li> </ul> </div> </div> </div> <div class="product-item-details"> <h2><a href="#">Defyant Reversible Dot Shorts</a></h2> <div class="price-like-box"> <div class="pull-left item-price"> <span class="old-price"><del>$50.00</del></span> <span class="current-price">$50.00</span> </div> <div class="pull-right item-rating"> <ul class="list-inline"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa-fa-star"></i></li> <li><i class="fa fa-star-o"></i></li> <li><i class="fa fa-star-o"></i></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div>

.single-product-item { width: 100%; border: 1px solid #eeeeee; margin-bottom: 30px; padding: 0 0 20px; position: relative; background-color: #fff; border-radius: 4px; } .product-image-wrap { display: block; width: 100%; overflow: hidden; position: relative; } .single-product-item img { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .single-product-item img { margin: 0; padding: 0; float: left; z-index: 4; width: 100%; } .single-product-item .product-detail-inner { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; -o-transition: all 0.45s ease-in-out; -ms-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; background-color: rgba(0, 0, 0, 0.3); } .single-product-item:hover .item-details-overly-info { bottom: 50px; } .single-product-item .item-details-overly-info { z-index: 10; color: #fff; position: absolute; width: 100%; height: 40px; text-align: center; bottom: 0; -webkit-transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; -o-transition: all 0.45s ease-in-out; -ms-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } .single-product-item:hover img { opacity: 1; transform: scale(1.15, 1.15); -webkit-transform: scale(1.15, 1.15); -moz-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); -o-transform: scale(1.15, 1.15); } .single-product-item:hover .product-detail-inner { opacity: 1; } .item-details-overly-info ul li { padding: 0; } .item-details-overly-info ul li a i { height: 30px; width: 30px; line-height: 30px; border-radius: 2px; display: block; margin: 2px; color: #949291; text-align: center; vertical-align: middle; background: #fff; transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; } .item-details-overly-info ul li a i:hover { background: #000; color: #fff; } .product-item-details { padding: 0 10px; display: block; overflow: hidden; } .product-item-details h2 { font-size: 15px; line-height: 20px; padding: 10px 0; margin: 0; font-weight: 400; color: #949291; } .product-item-details h2 a { color: #949291; } .product-item-details h2 a:hover { color: #000; } .price-like-box { } .item-price { } .item-price span { font-size: 16px; font-weight: 500; } .item-price .old-price { font-size: 14px; font-weight: 400; } .item-price .current-price { color: #000; font-weight: 600; } .item-rating ul li { padding: 0; color: #000; font-size: 11px; line-height: 15px; }