How to make hover text fully opaque

I'm using this code to add a hover text overlay on my image poster. How do I make it so that the text is 100% opaque? Right now it is transparent and hard to read. I'm using ver 7.0

Thanks!

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: .5s
}
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: .8;
  background-color: #FAD22C!important;
}

Hi,

Can you share link to page where you use image? We can check code easier

https://www.hanaazim.com/

Because you used opacity, this opacity attribute will affect on both title + overlay

You need to use a different code to add overlay.

Can you remove code again? We can test new code easier