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;
}

Hi Deaton,

Your site is currently password protected.

I posted this code to a similar question - it was built for poster image blocks.

/*rollover image effect*/
.image-block figcaption{
  opacity: 0;
}
/*on hover*/
.image-block:hover figcaption{
  opacity: 1;
}
.image-block:hover img{
  filter:brightness(40%);
}
/*transition*/
.image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{
  transition: .5s;
}

Let me know if this is close to what you were after, I can tweak the code if not.

Is there a way to update this code so that in a mobile environment the transition happens upon scroll or when the image is in view?