BugWP logo BugWP
Back to Community
Home / Community / Core → Requests and feedback

How to Overlay Post Titles and Excerpts on Featured Images in a Query Loop Grid

18 threads Sep 16, 2025 Core → Requests and feedback

Content

Many WordPress users want to create a visually appealing posts grid where the title and excerpt elegantly overlay the featured image. This is a common design pattern, but implementing it with the Query Loop block can be tricky if you're not familiar with CSS. This guide will walk you through the most common solutions.

Why This Problem Occurs

The core WordPress editor and most block themes do not include a built-in setting to create this specific overlay effect. The Query Loop block outputs a standard structure of HTML elements, and without additional styling, the post title, excerpt, and featured image simply stack vertically or horizontally. To achieve the overlapping design, you need to use CSS to control the positioning of these elements.

Common Solutions

1. Using Custom CSS (The Most Common Method)

The primary way to achieve this overlay is by adding Custom CSS to your site. This involves using CSS properties like position: absolute to layer the text elements on top of the image. Based on community discussions, here is a sample CSS code that can serve as a starting point. You will need to add this to your theme's Additional CSS section (Appearance > Customize > Additional CSS) or via a child theme.

.wp-block-post { 
    position: relative; 
}
.wp-block-post-featured-image { 
    margin-bottom: 0; 
}
.wp-block-post-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 1em; 
    color: white; 
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%); 
}

Important Note: The exact CSS selectors (like .wp-block-post-content) can vary significantly depending on your active theme. You will likely need to use your browser's inspector tool to identify the correct classes generated by your specific theme and adjust the code accordingly.

2. Exploring Block Plugins

If writing CSS code is not feasible for you, another option is to look for a well-made block plugin that includes a posts grid block with built-in overlay options. While the 'Requests and Feedback' forum does not endorse specific products, searching the WordPress Plugin Directory for terms like "posts grid" or "query loop" may help you find a suitable solution that adds this UI functionality directly into the block editor.

3. Checking Your Theme's Built-in Options

Some more advanced themes include their own custom blocks or settings for designing post grids. Before attempting other methods, thoroughly check your theme's documentation and the settings panel of its specific query loop or posts grid blocks. You may find an overlay option already available.

Conclusion

Creating an text overlay on featured images in a Query Loop is a classic case of needing to bridge a design gap with custom code. The most reliable and lightweight method is to use Custom CSS. Always remember to test any code changes on a staging site first and use a child theme to prevent your modifications from being overwritten by theme updates.

Related Support Threads Support