<style>
.product-container .product-img {
  overflow: hidden;
}

.product-img:hover {
  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.product-container:hover .product-img  {
  transition: transform 0.3s ease-in-out; /* Smooth transition for the zoom effect */
}

.product-img:hover .product-img img {
  transform: scale(1.3); /* Zooms the image to 120% of its original size */
}
.middle {
    opacity: 0;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: 0.5s;
}
</style>