In the comments section of Genesis Sandbox Featured Content Widget's output in a responsive grid with title and excerpt/content on hover, a user asked:
Hi! Thank you so much for this – it works like a wonder!
Quick question – what would I change on the code to have the post/entry title stay below the image + have the excerpt ONLY in the hover action? (I’m assuming it’d be in the functions.php portion where the title_content is wrapped but I cannot figure it out – thank you so much! )
In this article I take the method shared in Featured Pages' Images with Title Overlay in Normal State and Description Overlay on Hover tutorial and tweak it for displaying a Home Featured widget area populated by a Flexible Posts Widget plugin's widget. We are going to use a custom template for the widget so that title appears below featured image and the excerpt on hover for each entry.
When a post's featured image is hovered,
On handheld devices excerpts will appear below the featured images like this:
At 800px and below, one image will be set to appear per row like this:
Step 1
Install and activate Flexible Posts Widget.
Step 2
Create a file named say, home.js inside js directory (create if not existing) in the child theme having the following code:
