<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <section id="new-product" class="container section-data"> <h2>جدیدترین مصولات</h2> <div class="row"> <div class="col-md-3"> <div class="product-list"> <div class="card"> <div class="offer rounded-circle badge-danger top-left position-absolute w-25 m-3">20% <br>تخفیف</div> <img class="card-img" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt="Card image"> <div class="card-img-overlay"> <p class="card-text text-center"> <span class="btn btn-dark mx-auto w-100">مشاهده محصول</span> </p> <p class="card-text text-center"> <span class="btn btn-dark mx-auto w-100">افزودن به سبد خرید</span> </p> </div> </div><!--.card--> <h5 class="card-title text-center"><a href="#">شیردوبل درخشان</a> </h5> <div class="badge badge-primary mx-auto">3.2<i class="fas fa-star"></i></div> <div class="price text-center text-danger">12.000 تومان</div> </div><!--.product-list--> </div><!--.col--> <div class="col-md-3"> <div class="product-list"> <div class="card"> <div class="offer rounded-circle badge-danger top-left position-absolute w-25 m-3">20% <br>تخفیف</div> <img class="card-img" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt="Card image"> <div class="card-img-overlay" style="display: block;"> <p class="card-text text-center"> <span class="btn btn-dark mx-auto w-100">مشاهده محصول</span> </p> <p class="card-text text-center"> <span class="btn btn-dark mx-auto w-100">افزودن به سبد خرید</span> </p> </div> </div><!--.card--> <h5 class="card-title text-center"><a href="#">شیردوبل درخشان</a> </h5> <div class="badge badge-primary mx-auto">3.2<i class="fas fa-star"></i></div> <div class="price text-center text-danger">12.000 تومان</div> </div><!--.product-list--> </div><!--.col--> </div><!--.row--> </section><!--#new-product-->

body{ background:#f8f8f8; } .section-data h2{ text-align: center; margin: 20px auto; font-size:2rem; } .product-list{ text-align: center; } .product-list .offer{ font-size:0.80rem; height: 56px; padding-top: 7px; } .product-list .card-img { width: 150px !important; height:200px; margin: auto auto; } .product-list:hover .card-img-overlay{ display: block; } .product-list .card-img-overlay{ display: none; background: rgba(217,217,217,0.35); padding-top: 50px; width: 95%; height: 95%; margin: auto; } .product-list .card-title a{ color: #000; } .product-list .card-title a:hover{ color: #484848; text-decoration: none; } .product-list .card-title,.product-list .price{ padding-top: 20px; }