This is an extension of my previous post about how to display featured image as a hero image on single page/post and overlay entry title, post info and page excerpts on featured image.
This post, however, is a bit different. I’ll share code on how to display the featured image on blog archive and overlay entry title and other info as explained in last post.
Since we want to display featured on the blog archive itself, the code will be slightly different from that last post.
Here’s what I will share in this post:
#1 – Display Page Excerpts Below Entry Title
#2 – Display Your Featured Image as Hero Image on Blog Archive
#3 – Overlay Entry Title, Excerpts, Post Meta on Hero Image
Note: The code uses the featured image in your blog archive. However, I’ve included an option to use a fallback featured image for your blog archive, just in case.
Add This Snippet to Your Functions File
Note: If you want to use different color on your hero image, you need to change the value inside linear-gradient. For example, you can try out the following value: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.9)) if you want to use a darker shade. However, you need to apply a contrasting color on your entry title, excerpts, and post meta. Check out this tutorial on linear-gradient if you want more customization.
Here’s How to Style It
/* Blog Archive Styling.*/
.post-hero .archive-description {
background-color: transparent;
padding: 0;
margin-bottom: 0;
}
.post-hero .archive-title {
font-size: 72px;
font-weight: bold;
}
Note: You might want to tweak the CSS above depending on your needs.
That’s it. Let me know if you have any questions.
