[Support request] How to show post title over featured image when cursor comes over it

[wordpressuser13]

I was trying to use GenerateBlocks to do this but could not. I want to change the blog layout of my website. I already added a layout filter to remove the title from under the featured images on the blog pages. Now, I want to add another filter when when the cursor hovers over the featured image, it displays the post’s title on the image. I hope I made sense – anyone know how I can achieve this, and thank you!

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[wordpressuser13]

Hi, I linked it now to the “Private information” area. As you can see, I removed all the titles. And I want to achieve something like when the cursor hovers over one of the featured images, the title of post is displayed on the featured image.

If the hover part is very complicated, then how can I just put the post title overlayed on the featured image (maybe with a darker opacity background so it can display well)

[Fernando]

Hello there,

Can you show the title again? We’ll check if there’s a simple CSS to achieve what you’re going for.

[wordpressuser13]

Hi, okay I enabled it again. It would be nice if there was an effect like this website which I attached to Private info area, where once you hover over the image, it overlays with the title

[David]

Hi there,

you can do it with GenerateBlocks Pro and GP Element – Content Template.
Do you have GB Pro if you don’t we can still do it with some CSS.

Begin with:

1. In Appearance > GeneratePress activate the Elements module.
2. Appearance > Elements -> New -> Block

2.1 Set the type to Content Template:

https://docs.generatepress.com/article/block-element-content-template/

3. In the editor:

3.1 Add a Container Block.
Set its Layout > Display -> Flex
Set the Justify and Align to Center
Set a Sizing -> Min Heighet eg. 300px
Give it some Spacing > Padding eg. 20px

3.1.1 in the Dyanamic Data panel set the cotainer background to the show the Featured Image

3.2 Inside the Container Block add a Headline Block and set its Dyanamic data to show the post title and link to the single post.

4. Now set the Elements Display Rules to your Blog and All Archives.

At this point the title should be over the featured image

[Author]

Posts