Image Overlay Color - CSS Code Help

Site URL: https://www.shelbyargo.com/

Hey, I'm working on my website and have added additional CSS code to my site's template to create image overlays, but can't figure out how to change the color of the overlay, it's currently black at an opacity. I think the color might already be determined in the templates code. This is the code I'm using. Is there a way to override that?

.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;
}

&: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: 13px !important;
 font-weight: normal !important;
 color: #ffffff !important; 
 line-height: 7px !important;
 letter-spacing: .8px !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%;
}

9 hours ago, shelbyargo said:

Site URL: https://www.shelbyargo.com/

Hey, I'm working on my website and have added additional CSS code to my site's template to create image overlays, but can't figure out how to change the color of the overlay, it's currently black at an opacity. I think the color might already be determined in the templates code. This is the code I'm using. Is there a way to override that?

 

.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;
}

&: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: 13px !important;
 font-weight: normal !important;
 color: #ffffff !important; 
 line-height: 7px !important;
 letter-spacing: .8px !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%;
}

You enable site wide password to help checking the site