To make text overlap image in Product Block, like this.
#1. First, find Product Block ID.
In my example, it is: #block-yui_3_17_2_1_1739950099133_864
#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-yui_3_17_2_1_1739950099133_864 {
.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;
}
.product-block .productDetails {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
}
}
Remember to change ID.
#3. To change overlay color, change this.
