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