CSS for poster text and background?

Site URL: https://corn-apricot-zn88.squarespace.com/portfoliodetails/8yypiklex23co21rpmxwqtxrbmliw4

I have tried all the examples here. I have code to make the text overlay appear on hover, BUT the background of the box is white, I would like it to be about .7 opacity. No matter what I try, it won't change. I feel like I am missing something simple. 

This is what I have: 

Issues: whole overlay (text and background) are .5 opacity. I'd like the text to be .1.

Also, the colors are the opposite if what we want - we want white lettering on translucent black bkgd.  When I tried to just change them using the 7.1 color change, the background NEVER goes to #000000.

Thoughts? 

.design-layout-poster .image-card-wrapper 
{
  visibility: hidden;
  opacity:0;

}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: .5;
}