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!

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

On 7/11/2023 at 8:43 PM, Kellyx10 said:

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

You mean for Print & Digital Item?

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

Is that right?

Hi @tuanphan

Thanks for checking detail first : )

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

Is this possible ?

On 7/11/2023 at 8:43 PM, Kellyx10 said:

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

The url doesn't work now

@tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works 

I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

Your kind help will be truly appreciated.

On 7/23/2023 at 2:41 PM, Kellyx10 said:

@tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works 

I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

 

Your kind help will be truly appreciated.

Add to Design > Custom CSS

/* Blig List - Hover Effect */
@media screen and (min-width:992px) {
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    position: relative !important;
    transform: unset !important;
}
.blog-basic-grid article:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}

.blog-basic-grid .image-wrapper:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
}

.blog-basic-grid article:hover .image-wrapper:after {
    opacity: 1;
    transition: all 0.3s;
}

.blog-basic-grid .image-wrapper {
    position: relative;
}}

Magic! Thank you so mcuh, @tuanphan 🙂