Help with editing Caption Overlay on Hover

Site URL: https://hen-shallot-83dt.squarespace.com/

Hello, I am looking to tinker with and edit the "Caption Overlay on Hover" code on a images in a website not currently published (https://hen-shallot-83dt.squarespace.com/)

I would like the text in the overlay on hover to be larger and white and was looking to find a way to make the overlay cover the entire photo and not just a portion of the photo, as seen in the screenshot:

This is the code I found online and am currently using:

.image-caption-wrapper { top: 0 !important; padding-top: 10% !important; background: rgba(1,30,64,0.7) !important; text-align: center; pointer-events: none; }

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper strong { color: white; font-size: 12px !important; 
}

It helps somewhat - it moved the overlay to the top and let me change the background color. Can't seem to get the text color/font or overlay size to work though. Any help would be greatly appreciated!

Your site is private. Can you setup an access password then we can access easier.

Certainly. I'm a bit new to this, so I hope this works. Let me know if you're unable to access:

Password: Xolbe22

The code/section in question is on the home page.

On 6/19/2022 at 7:19 AM, MAIAgt said:

Certainly. I'm a bit new to this, so I hope this works. Let me know if you're unable to access:

Password: Xolbe22

The code/section in question is on the home page.

Add to Design > Custom CSS

figcaption.image-caption-wrapper {
    height: 100% !important;
    max-height: 100% !important;
}
div#page-62af9d6d1a62ab34604270e6 .image-caption * {
    font-size: 16px !important;
    color: white;
}

Thanks tuanphan, this worked great! I changed the div#page to the #block and it works like a charm. You're the best!

Hi, I am dealing with something similar. I've used the code you've provided to achieve the full overlay on hover w/ text from inline caption. 

My challenge now is that I cannot get the text to be centered over the image, it is towards the top. If I were to just add some spacing to the text, it would mess things up for mobile. 

Any help would be appreciated! Website: https://www.wearerareform.com/

On 7/28/2022 at 10:33 PM, itsbreezy said:

Hi, I am dealing with something similar. I've used the code you've provided to achieve the full overlay on hover w/ text from inline caption. 

My challenge now is that I cannot get the text to be centered over the image, it is towards the top. If I were to just add some spacing to the text, it would mess things up for mobile. 

Any help would be appreciated! Website: https://www.wearerareform.com/

 

 

Use this code

figcaption.image-caption-wrapper {
    height: 100% !important;
    max-height: 100% !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

Thank you tuanphan!!