Blog Title Image Overlay on Squarespace 7.1

Customize your blog post grid with this CSS that places the blog title over the image:

Copy Code

#ENTER ID NUMBER HERE{
    .blog-item {
        position: relative;
    }
    .blog-item .blog-basic-grid--text{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        bottom: 40px;
        z-index: 2;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .blog-item .blog-basic-grid--text *{
        color: #fff;
        text-transform: capitalize;
    }
    .blog-item .blog-article-spacer {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
    }
}