Sarah-Daye

Is this the only solution? Can the grid display three images on mobile? This is on my homepage, so I dont want three images stacked before potential customers get to the "meat" of my homepage. Thank you!

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!

Is there a way to get the overlay white, not black? I copied the above code, made a few color tweaks and everything looks great, I just can't change the color of the actual overlay.