Visibility: hidden not working

I'm using this code to add a hover text overlay to my image but the image still has a slight gray transparency on top when I don't hover. How do I get it so that the grey is gone and I can see the proper color of my image when there is no hover?

I'm in 7.0

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

}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: .8;
  background-color: #FAD22C!important;
}