Text overlay on blog grid?

Hi there, 

I'm looking to style a blog grid so that the title/subtitle text appears as an overlay on top of the photo. Right now I'm setting it up as a series of individual "poster" images. Is there a better way to do this / an easy setting I just need to change? I'd prefer to use something like a blog or gallery block if I could change the text.

I've attached a screenshot showing the default blog layout vs what I'm hoping to achieve.

Thanks, 

Emma

Update! It looks like a "portfolio overlay grid" element might work, in case anyone else is looking to do this.

Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution?

I'm attempting to achieve this on a Canson site 🤔

On 6/25/2022 at 5:54 PM, TimCc said:

Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution?

I'm attempting to achieve this on a Canson site 🤔

If you share link to blog page on your site, we can give code to achieve this

On 7/1/2022 at 8:37 AM, tuanphan said:

If you share link to blog page on your site, we can give code to achieve this

Thanks @tuanphan! 

Link is https://tcooperphoto.com/frames/

Cheers

30 minutes ago, TimCc said:

Thanks @tuanphan! 

Link is https://tcooperphoto.com/frames/

 

Cheers

Add to Design > Custom CSS

a.BlogList-item-title {
    position: absolute;
    top: 50%;
    z-index: 9999;
    width: 100%;
    text-align: center;
    color: white;
}

article.BlogList-item {
    position: relative;
}

.Blog-meta.BlogList-item-meta {
    position: absolute;
    top: calc(~"50% + 30px");
    width: 100%;
    text-align: center;
}

You are truly magical @tuanphan, Thanks so much!