[ad_1]
Hi, I’m presuming this is a fairly simple problem but can’t find a way to do it easily.
On this page I am looking to overlay the post titles on to the centre of the image above:
I have managed to do it successfully on the home page
If I use position:absolute and top:0 then I can get all the titles at the top of the page overlayed on top of each other but that’s obviously not what I’m trying to do…
Is it possible to do this? I want to change the post images and remove the text from them – I’ve been inconsistent in the past with font, etc. as you can see! I’d like all the text, styling, etc. to be done by CSS so if I want to change things later it’s easy.
[ad_2]
I wouldn’t recommend using ‘position: absolute’ to overlay one element onto another if they aren’t sharing the same parent container. It will probably cause weirdness on different screen sizes.
There are several ways to do in WordPress.
It looks like you’re using Astra theme. If you have the pro version, you can do it with the header module and design a custom post header with the feature image and title as a hero section.
Alternatively, you could omit the featured image from your theme, and instead display it manually using a cover block which is basically just text over an image.
Finally, you could create a custom PHP snippet to do this and use one of Astra’s many hook locations to add the featured image w/ overlayed text to the top of the post.