<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 ----------> <!-- User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container"> <div class="row"> <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3"> <div class="product-item"> <div class="pi-img-wrapper"> <img src="http://keenthemes.com/assets/bootsnipp/k1.jpg" class="img-responsive img-top-round" alt="Berry Lace Dress"> <div> <a href="#" class="btn">Zoom</a> <a href="#" class="btn">View</a> </div> </div> <h3><a href="shop-item.html">Berry Lace Dress</a></h3> <div class="pi-price">$29.00</div> <a href="javascript:;" class="btn">Add to cart</a> <div class="sticker sticker-new"></div> </div> </div> <div class="row visible-xs"><br></div> <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3"> <div class="product-item"> <div class="pi-img-wrapper"> <img src="http://keenthemes.com/assets/bootsnipp/k2.jpg" class="img-responsive" alt="Berry Lace Dress"> <div> <a href="#" class="btn">Zoom</a> <a href="#" class="btn">View</a> </div> </div> <h3><a href="shop-item.html">Berry Lace Dress</a></h3> <div class="pi-price">$29.00</div> <a href="javascript:;" class="btn add2cart">Add to cart</a> </div> </div> <div class="row visible-xs"><br></div> <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3"> <div class="product-item"> <div class="pi-img-wrapper"> <img src="http://keenthemes.com/assets/bootsnipp/k3.jpg" class="img-responsive" alt="Berry Lace Dress"> <div> <a href="#" class="btn">Zoom</a> <a href="#" class="btn">View</a> </div> </div> <h3><a href="shop-item.html">Berry Lace Dress</a></h3> <div class="pi-price">$29.00</div> <a href="javascript:;" class="btn add2cart">Add to cart</a> </div> </div> <div class="row visible-xs"><br></div> <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3"> <div class="product-item"> <div class="pi-img-wrapper"> <img src="http://keenthemes.com/assets/bootsnipp/k1.jpg" class="img-responsive" alt="Berry Lace Dress"> <div> <a href="#" class="btn">Zoom</a> <a href="#" class="btn">View</a> </div> </div> <h3><a href="shop-item.html">Berry Lace Dress</a></h3> <div class="pi-price">$29.00</div> <a href="javascript:;" class="btn add2cart">Add to cart</a> <div class="sticker sticker-new"></div> </div> </div> </div> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ .product-item { padding: 0px; background: #e41165; border-radius: 15px; margin-top: 20px; position: relative; width: 220px; height: 290px; } .product-item:hover { box-shadow: 8px 8px rgba(234, 234, 234, 0.9); } .product-item:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height:0; } .sticker { position: absolute; top: 0; left: 0; width: 63px; height: 63px; } .sticker-new { background: url(http://keenthemes.com/assets/bootsnipp/new.png) no-repeat; left: auto; right: 0; } .pi-img-wrapper { position: relative; } /* grey area when mouse hover over photo */ .pi-img-wrapper div { background: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; display: none; width: 220px; height: 203px; text-align: center; } .product-item:hover>.pi-img-wrapper>div { display: block; } .img-top-round { border: 0px solid; padding: 0px; background: #dddddd; border-top-right-radius: 1em; border-top-left-radius: 1em; } .pi-img-wrapper div .btn { padding: 20px 10px; color: #fff; border: 1px #ffffff solid; margin: -13px 5px 0; background: transparent; text-transform: uppercase; position: relative; top: 30%; line-height: 0.5; /* height of hover buttons */ font-size: 12px; } /* All abt Add To Cart Button */ .product-item .btn { color: #000000; /* Add to cart font color */ margin: -4px -4px 0px 40px; /* position of button within frame */ background: #fee408; } .product-item .btn:hover { color: #FFFFFF; /* Add to cart font color */ background: #e84d1c; } /* Product Name Fonts */ .product-item h3 { font-size: 14px; font-weight: 300; padding-bottom: 4px; text-transform: uppercase; } .product-item h3 a { padding: 10px; color: #FFFFFF; } .product-item h3 a:hover { color: #fee408; } .pi-price { padding: 10px; color: #ffffff; font-size: 18px; float: left; padding-top: 1px; } .product-item .add2cart { float: right; color: #000000; /* Add to cart font color */ border: 1px #ededed solid; padding: 3px 6px; text-transform: uppercase; } .product-item .add2cart:hover { color: #fff; background: #e84d1c; border-color: #e84d1c; }