How to overlay blog post title & categories on blog thumbnail images with CSS (Squarespace 7.1)

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)

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.