<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <div class="container"> <div class="row"> <h2>Responsive Product Display Page for E-commerce Website</h2> <br/><br/> <h3><a href="http://www.schauhan.in/bootstrap-hotel-booking-form-templates/">Bootstrap Responsive Form</a></h3> </div> </div> <div class="product_container"> <div class="heart"><i class="fa fa-heart"></i></div> <div class="quick">Quick View</div> <div class="image_container"><img src="http://www.schauhan.in/Bootstrap_4/Multiitem_Carousel/product/3.jpeg" /></div> <div class="category">Catwalk</div> <div class="nc"> <div class="name">Women Tan Flats</div> <div class="assured"><img src="fa_8b4b59.png" /></div> <div class="clear"></div> </div> <div class="p_container"> <div class="n_p">Rs.509</div> <div class="o_p">Rs.699</div> <div class="offer">54% Off</div> <div class="clear"></div> </div> <div class="bank"> Bank Offer </div> </div> <div class="product_container"> <div class="heart"><i class="fa fa-heart"></i></div> <div class="quick">Quick View</div> <div class="image_container"><img src="http://www.schauhan.in/Bootstrap_4/Multiitem_Carousel/product/3.jpeg" /></div> <div class="category">Catwalk</div> <div class="nc"> <div class="name">Women Tan Flats</div> <div class="assured"><img src="fa_8b4b59.png" /></div> <div class="clear"></div> </div> <div class="p_container"> <div class="n_p">Rs.509</div> <div class="o_p">Rs.699</div> <div class="offer">54% Off</div> <div class="clear"></div> </div> <div class="bank"> Bank Offer </div> </div> <div class="product_container"> <div class="heart"><i class="fa fa-heart"></i></div> <div class="quick">Quick View</div> <div class="image_container"><img src="http://www.schauhan.in/Bootstrap_4/Multiitem_Carousel/product/3.jpeg" /></div> <div class="category">Catwalk</div> <div class="nc"> <div class="name">Women Tan Flats</div> <div class="assured"><img src="fa_8b4b59.png" /></div> <div class="clear"></div> </div> <div class="p_container"> <div class="n_p">Rs.509</div> <div class="o_p">Rs.699</div> <div class="offer">54% Off</div> <div class="clear"></div> </div> <div class="bank"> Bank Offer </div> </div> <div class="product_container"> <div class="heart"><i class="fa fa-heart"></i></div> <div class="quick">Quick View</div> <div class="image_container"><img src="http://www.schauhan.in/Bootstrap_4/Multiitem_Carousel/product/3.jpeg" /></div> <div class="category">Catwalk</div> <div class="nc"> <div class="name">Women Tan Flats</div> <div class="assured"><img src="fa_8b4b59.png" /></div> <div class="clear"></div> </div> <div class="p_container"> <div class="n_p">Rs.509</div> <div class="o_p">Rs.699</div> <div class="offer">54% Off</div> <div class="clear"></div> </div> <div class="bank"> Bank Offer </div> </div>

body { font-family:Verdana, Geneva, sans-serif; font-size:13px; } .product_container { width:25%; box-sizing:border-box; position:relative; float:left; padding:10px; box-shadow:0px 0px 3px #333; transition:all ease-in-out 0.3s; } .image_container img { width:100%; max-height:150px; } .category { color:#666; font-weight:600; font-size:14px; margin-top: 60px; } .clear { clear:both; } .name { float:left; } .assured { float:left; } .assured img { width:80px; height:15px; } .p_container { margin-top:7px; } .n_p { float:left; font-weight:800; } .o_p { float:left; margin-left:10px; } .offer { float:left; margin-left:10px; color:rgba(0,153,0,1); } .bank { color:rgba(0,153,0,1); margin-top:7px; font-weight:800; } .heart { position:absolute; top:20px; left:20px; color:#f60; } .heart i { font-size:25px; } .quick { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#f60; width:100px; height:100px; border-radius:100%; line-height:100px; text-align:center; font-size:13px; color:#fff; font-weight:800; transition:all ease-in-out 0.3s; cursor:pointer; } .product_container:hover .quick { display:block; } @media (max-width: 767px) { .product_container { width:100%; padding:10px; box-sizing:border-box; margin-left:0px; margin-top:10px; box-shadow:0px 0px 1px #333; } }