<div class="container mb-5 mt-5">
<div class="row">
<div class="col-md-4">
<div class="card mt-3">
<div class="product-1 align-items-center p-2 text-center">
<div class="image-container"> <img class="xyz rounded" src="https://i.imgur.com/nOFet9u.jpg" width="200"> <img class="xyz-replacement rounded" src="https://i.imgur.com/dzwhzqC.jpg" width="200"> </div>
<h5>Puma Shoes</h5>
<div class="mt-3 info"> <span class="text1 d-block">Garnier Pure Active Miceller</span> <span class="text1">cleansing water. 125 ml </span> </div>
<div class=" cost mt-3 text-dark"> <span>$40</span>
<div class=" star mt-3 align-items-center"> <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>
</div>
</div>
<div class="p-3 bg-danger text-center text-white mt-3 cursor cart"> <span class="text-uppercase cart-text">Add to cart</span> </div>
</div>
</div>
<div class="col-md-4">
<div class="card mt-3">
<div class="product-1 align-items-center p-2 text-center">
<div class="image-container"> <img class="xyz rounded" src="https://i.imgur.com/VY0R9aV.png" width="200"> <img class="xyz-replacement rounded" src="https://i.imgur.com/KVvyV23.png" width="200"> </div>
<h5>Smart watch</h5>
<div class="mt-3 info"> <span class="text1 d-block">Garnier Pure Active Miceller</span> <span class="text1">cleansing water. 125 ml </span> </div>
<div class=" watchcost mt-3 text-dark"> <span>$120</span>
<div class=" star mt-3 align-items-center"> <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>
</div>
</div>
<div class="watch p-3 text-center text-white mt-3 cursor cart"> <span class="text-uppercase cart-text">Add to cart</span> </div>
</div>
</div>
<div class="col-md-4">
<div class="card mt-3">
<div class="product-1 align-items-center p-2 text-center">
<div class="image-container"> <img class="xyz rounded" src="https://i.imgur.com/jVMDKMw.png" width="200"> <img class="xyz-replacement rounded" src="https://i.imgur.com/fEDh17S.png" width="200"> </div>
<h5>Top for Women</h5>
<div class="mt-3 info"> <span class="text1 d-block">Garnier Pure Active Miceller</span> <span class="text1">cleansing water. 125 ml </span> </div>
<div class=" tshirtcost mt-3 text-dark"> <span>$20</span>
<div class=" star mt-3 align-items-center"> <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>
</div>
</div>
<div class=" tshirt p-3 text-center text-white mt-3 cursor cart"> <span class="text-uppercase cart-text">Add to cart</span> </div>
</div>
</div>
</div>
</div>
body {
background-color: #B3E5FC;
border-radius: 10px
}
.card {
border: none;
border-radius: 6px;
background-color: #fff
}
.text1 {
font-size: 13px;
color: #cbcbcb
}
.info {
line-height: 17px
}
.cost span {
color: #fb3531;
font-weight: bold;
font-size: 20px
}
.star {
color: #FBC02D
}
.watchcost span {
color: #286783;
font-weight: bold;
font-size: 20px
}
.watch {
background: #286783
}
.tshirtcost span {
color: #0012b2;
font-weight: bold;
font-size: 20px
}
.tshirt {
background-color: #0012b2
}
.cursor {
cursor: pointer
}
.image-container {
position: relative;
cursor: pointer;
align-items: center;
display: flex;
justify-content: center
}
.image-container:nth-child(1) {
transition: opacity 10s ease
}
.image-container:hover .xyz-replacement {
display: block;
animation: fade_in_show 0.5s
}
.xyz-replacement {
display: none;
position: absolute;
bottom: 0;
z-index: 9;
transition: opacity 10s ease
}
@keyframes fade_in_show {
0% {
opacity: 0;
transform: scale(0)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.cart-text {
transition: all .2s ease-in-out
}
.cart:hover .cart-text {
font-size: 18px
}