How to Overlay Metadata on Your Blog Post Thumbnails

When you add a blog post to a Squarespace website, your post will have meta data, for example the date the post was published.

A client recently asked me if there was a way to display this metadata over the top of their post thumbnail. Now I’ll be honest, I wasn’t actually sure. But after a bit of digging and playing around with some custom code, I found a way.

The end result looked pretty cool, so today’s tutorial will talk you through the code you need if you want to overlap metadata on your blog post thumbnails.

Watch the video

Check out the YouTube video below 👇

The custom code you need to add to your Custom CSS panel is:

.blog-meta-section {

position: absolute;

top: 15px;

left: 15px;

background: white;

padding: 0px 10px;

}

.tweak-blog-basic-grid-primary-meta-date .blog-basic-grid .blog-meta-primary .blog-date{

font-size: 15px;

}

This code tells Squarespace that we’re targeting the meta section and the position is absolute.

The top and left sections of the code adds padding to the top and left of the meta data whilst background sets the background colour for the metadata box, ensuring the data isn’t lost within the thumbnail image.

View fullsize

The final part of the first section of the code, padding, focuses on the padding of the box around the meta data whilst the font size targets, you guessed it, the size of the font for the metadata.

Once you’ve added your code and changed your bespoke details e.g. box colour and font size, hit save and you’ll have added metadata to your blog thumbnails.

---

📩 Join the inner circle to get exclusive code updates

---

It’s actually not as complex as it first appears and with some custom CSS, you can easily overlay your metadata on your blog post thumbnails.

Found this tutorial useful? Don’t forget to save and share it!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?