How can I remove the promoted links overlay until hover?

Question

I have a question regarding the promoted links overlay. I have seen posts that make the overlay completely transparent, but I can't find anything that does exactly what I want.

When the promoted link is untouched, I want the black box overlay to be transparent, but when the promoted link is hovered over, I want the overlay to appear and cover the entire link to make it easier to read. Is this possible?

Thank you in advance for your help.

Answer 1

you will have to override the default CSS for promoted links web-part you can use the below CSS which fits your requirement.

.ms-tileview-tile-detailsBox{
    background-color: rgba(0,0,0,0);
}

.ms-tileview-tile-detailsBox:hover{
    background-color: rgba(0,0,0,0.6);
}