(Squarespace) Overlap text - image in Product block on hover

[tuanphan]

To make text overlap image in Product Block on Hover.

#1. First, find Product Block ID.

In my example, it is: #block-1fc32ae3681e17515c9e

#2. Next, use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or send me an email.

#block-1fc32ae3681e17515c9e { 
.product-block {
  position: relative;
  color: #fff;
}
.product-block .image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}
.product-block .productDetails {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.product-block:hover { .image-container::after, .productDetails {
  opacity: 1;
}}}

#3. Remember to change ID.

and overlay color.