Display Caption on Hover, Color Changes

Hello everyone! I need some assistance. 

I am trying to change the "Display Caption on Hover" for images so that the hover changes the entirety of the image to a white opacity of .3 and for the text to be black. However, I code everything except the text color seems to be impossible for me to figure out. Please help. You can see the issue with the image attached. This is the code I have so far:

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 width:100%;
 height:100;
  border: 2px solid white;
  padding: 1px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;
 
 background: rgba(255, 255, 255, 0.5) !important;
}

&:hover,
&:focus {
 opacity: 1;
}

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

.image-caption p {
 font-size: 24px !important;
 font-weight: semibold !important;
 color: #000000 !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
 background: #ffffff;
 opacity: .9;
}

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {

max-height: 100%;

}

div#block-yui_3_17_2_1_1629151089490_7573 * {
    transition: 1s !important;
}
.image-block * {
    transition: 1s !important;
}
 

Hi,

Can you share link to page where you have problem? We can help easier

Yes, of course. https://bitesandbashes.com/newhome

However, I don't have text overlaying the images currently because the text is the off-gray color. I just have a period or comma in place so that the overlay comes up.

On 2/14/2023 at 12:20 AM, EliseBB said:

Yes, of course. https://bitesandbashes.com/newhome

However, I don't have text overlaying the images currently because the text is the off-gray color. I just have a period or comma in place so that the overlay comes up.

 

You mean Let's Eat, Let's Plan.. images?