Featured Pages with Excerpts sliding up on Hover in Genesis

In this article we shall write a custom loop and query in Genesis to display 7 featured static Pages after header on front page in Genesis. Pages are going to be set as featured by ticking a checkbox, a custom field added via ACF. Three Pages will be shown in the top row and four in the bottom row.

For each item, the title will appear at the bottom left overlayed on the Page's featured image and when hovered, excerpt with read more button will be revealed with the title getting pushed up in a smooth animation. When the mouse moves away, excerpt will get hidden.

Regular state:

When hovered:

Step 1

Install and activate Advanced Custom Fields.

Create a field group called say, "Page Meta" and add a True / False type custom field named featured_page like this:

Step 2

Create a file named say, home.js in child theme's js directory (create, if not existing) having the following: