Hover overlay color not changing

Site URL: https://sparhawk-lite-sarah-daye.squarespace.com/config

Hi! 

I have custom css that is working perfectly EXCEPT the color of the overlay on the hover is not changing from black. 

Here is the code I used.  

// Image Hover Styling

.image-caption-wrapper {
 color: rgb(255,255,255);
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 width:75%;
 height:75%;
  border: 2px solid #045370;
  padding: 3px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;
}

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

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

.image-caption p {
 font-size: 20px !important;
 font-weight: semibold !important;
 color: #045370 !important;
 text-transform: uppercase; 
 line-height: 150% !important;
 letter-spacing: 2.5px !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:hover .image-caption-wrapper {
  max-height: 100%;
  }

And I will attach a screen shot of what it looks like. 

Thank you! 

Hi. What is access password?

following this! have you found a solution?

On 9/14/2021 at 6:45 PM, rosemac said:

following this! have you found a solution?

If you share link to page where you have problem, we can help easier