5 months ago 1219 1 Comment

How to Overlay Entry Title and Excerpts on Featured Image in Genesis

This tutorial will help you add the following features in your Genesis child theme.

#1 – Display Page Excerpts Below Entry Title
#2 – Display Post Meta Above Entry Title
#3 – Display Your Featured Image as Hero Image
#4 – Overlay Entry Title, Excerpts, Post Meta on Hero Image

Note: Before we start, head over to the images folder located inside your active child theme and add a fallback featured image with the following name: post-image.jpg

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

Note: You might want to tweak the CSS above depending on your needs.

That’s it. Let me know if you have any questions.