Jump to content

Text overlay on blog grid?

Recommended Posts

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

Screen Shot 2019-10-29 at 10.34.11 AM.png

Link to comment
  • 2 years later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 ?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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.

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.