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!