How to code/style a Gallery section?

Site URL: https://www.townly.com/victoria

Hi,

Looking to make the text in this gallery (simple grid) section on a page:

look like the text and be moved to the center within the image just like these images (poster) I created:

These examples can be found at https://www.townly.com/victoria.

I'm okay for this change to affect all simple grid galleries.

Appreciate any help.

Cheers,

Insider

Can you share link to page where you use gallery? We can help easier

1 hour ago, tuanphan said:

Can you share link to page where you use gallery? We can help easier

https://www.townly.com/victoria

It's a gallery section.

21 hours ago, Insider said:

https://www.townly.com/victoria

It's a gallery section.

Can you share link to page where you want to place text over image? We can help easier

On 6/15/2022 at 7:33 PM, tuanphan said:

Can you share link to page where you want to place text over image? We can help easier

This is the page.

https://www.townly.com/victoria

These are the images I want text over image.

If in case this is not what you are after, can you please be more specific?

I feel like the same question has been asked twice and I just don't want to misunderstand what you are asking

On 6/18/2022 at 6:54 PM, tuanphan said:

Add to Design > Custom CSS

/* Victoria */
body#collection-62a5989dc5fe2f1af4500e66 {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

Excellent thank you.

Not what I asked but I think its better so I'll adapt it. Thank you!