Apply Overlay to woo commerce archive products

[Bryan1976]

Hi - trying to add an overlay to the woo commerce product archive template. This can be applied to the text, but over the product image only would be ideal.

Thanks.

[digismith]

If you’re using the Bricks built in Product grid for archives then

root .dynamic { position: relative; }
root .dynamic:nth-child(1):hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 99;
}

Pasted in the CSS of the element will give the image a hover overlay.

It’s probably better to build your own loop - then an overlay is easy to add direct to the image in bricks.

[Bryan1976]

@digismith many thanks - this is great.

How do I make this so that hover isn’t needed. Basically all product archives always have an overlay whether they are clicked/hover or not.

Thanks for your help!

[digismith]

root .dynamic { position: relative; }
root .dynamic:nth-child(1)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 99;
}