How to code overlay text - colour issue

Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. 

You can really faintly see the overlay text, how do I get it to grey / black? 

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: absolute;
 pointer-events: none !important;
}

.image-caption-wrapper { max-height: 100% !important; }
.image-caption-wrapper {
  background: rgba(255,255,255,0.7) !important;
}

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

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

.image-caption p {
  color: #ea4e4c !important;
 font-size: 20px !important;
 font-weight: semibold !important;
 text-transform: lowercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 0 !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: ;
 opacity: .1;
}

35 minutes ago, hpeck said:

Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. 

You can really faintly see the overlay text, how do I get it to grey / black? 

 

 

 

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: absolute;
 pointer-events: none !important;
}

.image-caption-wrapper { max-height: 100% !important; }
.image-caption-wrapper {
  background: rgba(255,255,255,0.7) !important;
}

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

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

.image-caption p {
  color: #ea4e4c !important;
 font-size: 20px !important;
 font-weight: semibold !important;
 text-transform: lowercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 0 !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: ;
 opacity: .1;
}

 

Can you share your site with the protected password so we can take a look?

50 minutes ago, bangank36 said:

Can you share your site with the protected password so we can take a look?

Sure; 

https://pelican-fuchsia-f6eb.squarespace.com

WEBDESIGN2022

Domain is changed now to hannahpeckillustration.co.uk 

My testing

thank you! super helpful