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
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 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

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.