CSS for Gallery Block lightbox: captions below image (no hover)

Hello all, I am an artist working on my website (Squarespace 7.1) and am trying to make css adjustments to a gallery block lightbox. Instead of a hover with caption, I would like the caption strip to appear as a constant below the lightbox image (no hover, no overlay over the image).  I'd like to have a white caption strip and dark gray text below. I have attached an image of what it now looks like (Sample-1) and what I would like for it to look like (Sample-2).

I have no idea if this is possible given the options and limitations of this version of squarespace. Is it a complicated fix? I'm not wanting to move mountains here. Thanks in advance to anyone who might have suggestions. I have read a lot of forum posts (many frustrated Squarespace customers!) regarding the design limitations of captions in lightbox, but haven't come across anything specific to my goals.

Thanks again!

@Kindall Hi! Can you share your site URL for context? 

Hi! Yes, I have created a trial draft for playing around with css:
https://carillon-beige-kzfl.squarespace.com
password: Draft-1

The navigation link to Encaustics will take you to a page with a gallery block where I am testing stuff. Haven't had much luck.

Thanks!

On 8/5/2024 at 8:53 PM, Kindall said:

Hi! Yes, I have created a trial draft for playing around with css:
https://carillon-beige-kzfl.squarespace.com
password: Draft-1

The navigation link to Encaustics will take you to a page with a gallery block where I am testing stuff. Haven't had much luck.

Thanks!

You can use this to Website Tools > Custom CSS.

div.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

5 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS.

div.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

 

@tuanphan

Thanks so much for providing this css, it gets me 1/3 of the way there! Your provided css holds the caption strip as a constant (yay!), but it currently remains over the image in black. My goal is to place it below the image as a separate white strip with dark gray writing for caption (as shown in the second version above). I really appreciate you having taken the time to get back to me. 

On 8/7/2024 at 9:17 PM, Kindall said:

@tuanphan

Thanks so much for providing this css, it gets me 1/3 of the way there! Your provided css holds the caption strip as a constant (yay!), but it currently remains over the image in black. My goal is to place it below the image as a separate white strip with dark gray writing for caption (as shown in the second version above). I really appreciate you having taken the time to get back to me. 

Use this CSS code

.sqs-gallery-design-stacked-slide img {
    bottom: 150px !important;
    height: calc(~"100vh - 150px") !important;
}
div.yui3-lightbox2 div.sqs-lightbox-slideshow.sqs-gallery-design-stacked div.sqs-lightbox-slide.sqs-active-slide .sqs-lightbox-meta {
    background-color: transparent !important;
	opacity: 1 !important;
}
.yui3-lightbox2 .sqs-lightbox-meta * {
    color: #000 !important;
}

Thank you for your response, Tuanphan. This new css is super close (!), as the text is a constant below the image in the desired colors, but the dimensions of the image in lightbox are distorted. I have added a couple new pieces to the gallery, to show you how it looks with differently sized artwork. I have also added the images of the pieces separately below to show their accurate dimensions.

I am wondering if this ultimately would require an html injection, which my plan does not include access to. Thanks again for your efforts.