<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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> <div class="product_item"> <div class="col-lg-3 col-md-4 col-sm-6 mix sale" style="display: inline-block;" data-bound=""> <div class="single_product"> <div class="product_image"> <img src="https://www.karosearch.com/images/categories/medical-hospitals.jpg" alt=""> <div class="new_badge">New</div> <div class="box-content"> <a href="#"><i class="fa fa-heart-o"></i></a> <a href="#"><i class="fa fa-cart-plus"></i></a> <a href="#"><i class="fa fa-search"></i></a> </div> </div> <div class="product_btm_text"> <h4><a href="#">Product Title</a></h4> <div class="p_rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <span class="price">$123.00</span> </div> </div> </div> </div>

#product_area{ position:relative; padding-top: 0; } .mix{ display: none; } .product_item .mix{ display: none; } .product_filter { margin-bottom: 10px; } .product_filter ul { margin: 0px 0 40px; padding: 0; list-style: none; } .product_filter ul li { font-weight: 400; text-transform: uppercase; display: inline-block; cursor: pointer; padding: 12px 22px; font-size: 13px; border: 1px solid transparent; transition: .5s; letter-spacing: 1px; border-radius: 20px; margin:0px; color:#777; line-height: 1; } .product_filter .filter.active { color: #33d286; border-color: #33d286; } .single_product{ text-align: center; overflow: hidden; margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.02); padding-bottom: 20px; background: #fff; transition: .5s; } .single_product:hover{ box-shadow: 5px 5px 25px rgba(0,0,0,0.03); } .product_image{ overflow: hidden; position: relative; } .product_image img{ width: 100%; height: auto; transition: all 1.5s ease 0s; } .single_product:hover img{ transform: scale(1.2); } .single_product .box-content{ width: 100%; padding: 17px 10px; background: #fff; position: absolute; bottom: -100px; left: 0; z-index: 1; transition: all 0.6s ease 0s; overflow: hidden; opacity: 0; background: rgba(51, 210, 134, .9); } .single_product:hover .box-content{ bottom: 0; opacity: 1; } .box-content a { display: inline-block; color: #333; font-size: 14px; width: 35px; height: 35px; line-height: 35px; background: #fff; border: 1px solid #fff; border-radius: 50%; margin: 0 7px; transition:.5s; } .box-content a:hover { color: #33d286; border-color: #fff; } .product_btm_text p { color: #8E8E8E; text-transform: uppercase; font-size: 13px; } .product_btm_text h4 { text-transform: capitalize; margin-top: 17px; margin-bottom: 6px; font-size: 17px; } .product_btm_text h4, .product_btm_text h4 a{ color: #333; } .new_badge { display: inline-block; background: #33d286; color: #fff; padding: 3px 12px; font-size: 14px; position: absolute; top: 15px; right: 15px; border-radius: 2px; } .single_product span.price{ color: #33d286; font-size: 16px; } .no-padding{ padding: 0; } .p_rating{ color: #fec42d; cursor: pointer; }