.product-image-wrapper {
  position: relative;
  overflow: hidden;
}

.product-image {
  display: block;
  width: 100%;
  transition: opacity 0.4s ease-in-out;
}

.product-image.hover-image {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.product-image-wrapper:hover .hover-image {
  opacity: 1;
}

.product-image-wrapper:hover .main-image {
  opacity: 0;
}