How to overlay blog post title & categories on blog thumbnail images with CSS (Squarespace 7.1)
Pin to save for later
If you’re looking to make your blog stand out, overlaying titles and categories directly on your thumbnail images is a great way to create a polished and modern look.
In this tutorial, we guide you through the process of using custom CSS to seamlessly overlay text on your blog thumbnails. Whether you want to highlight categories for better navigation or make your titles pop, this step-by-step guide will help you achieve a cohesive, professional aesthetic.
Example:
How to overlay Title & Categories on blog thumbnail images
1. Navigate to your blog page > Edit Mode
3. Navigate to Edit Section blog thumbnail section
4. Select Basic Grid Blog layout
5. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
//BLOG TITLE + CATEGORIES OVERLAY
.blog-item {
position: relative;
}
.blog-item .blog-basic-grid--text{
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 160px;
z-index: 2;
padding: 0 1rem;
box-sizing: border-box;
}
.blog-item .blog-basic-grid--text *{
color: #ffffff;
text-transform: capitalize;
}
.blog-item .blog-article-spacer {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
}5. Save!
Important notes:
top: 160px; — controls the margin from the top of the image to the text (update 160px as needed)
color: #ffffff; — controls the color of the blog title text color (update #ffffff to HEX code of choice)
background: rgba(0, 0, 0, 0.3); — controls the overlay of the backgroud (update 0.3 to darken or lighten overlay opacity)
All set!
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
