Grid of CPT entries with title and excerpt sliding up on hover in Genesis

Updated on June 26, 2017

A user recently wrote me:

Hi Sridhar,
I find your tutorials very helpful. I was hesitant to signup and pay the $47/month, but it's money well spent every month. Thank you!

I have a request. Can you help me or put out a tutorial to accomplish what I'm seeing here?:
http://gymbox.com/classes

It's a grid of some kind of featured content, that when moused-over, shows the title and an excerpt, with a colored overlay.

I'm using your Genesis Starter Theme combined with Beaver Builder so the clients can edit. It's not critical to accomplish this using Beaver Builder. I'm comfortable working with the functions and css files.

Any help you could provide would be very appreciated!

...

I'd like the post grid to appear on a Page, and it would be most helpful if they could be CPTs. I'm comfortable using Pods to accomplish this. Ideally, I'd like to replicate the technique for a "Meet the team" page and another page that shows the "Programs" that this business offers. If you could get me started with one page for one CPT, I'm certain I can replicate the technique for others.

In this tutorial we are going to:

• create a team_member custom post type using Pods.
• create a custom Page Template and write a custom loop to display featured image (if present, otherwise a fallback image), entry title, and excerpt for all the team members - linking to the entry's permalink. This template will be a generic one that you can easily duplicate and use it for other post types.
• write CSS to arrange the entries in a grid using Flexbox, set the title and excerpt to not be visible initially and have them smoothly slide up when the image is hovered.

in Genesis.

We shall initially set up a simple grid like this:

When an entry is hovered:

Then enhance the solution by setting up a random background color overlay on the images from a defined set of hexadecimal values using Javascript.

Step 1

Install and activate Pods.

Create your CPT. Enable support for featured image.

If you'd like to import the one that I have used in this example, it can be downloaded from here.

Step 2

Create your CPT entries, while entering featured image (ideal size: 350 x 350) for each.

Step 3

Add the following in child theme's functions.php: