Sridhar Katakam

Genesis and WordPress Tutorials

Portfolio Grid on Showcase Pro’s Front Page with Title and Excerpt on Hover

by Leave a Comment

Updated on May 26, 2017

In the past, I wrote about setting up Grid of Portfolio images with Title and Excerpt on Hover in Showcase Pro on the portfolio CPT archive page. In this tutorial we shall replace a Showcase Pro's front page widget area (Front Page 4 to be specific) with a manual WP Query to pull the latest 6 portfolio CPT entries and write CSS to reveal the title and excerpt when the featured image is hovered for each entry.

We will set the entries to appear in 3 columns on desktop widths, in 2 columns for screen widths <= 736px and in 1 column for screen widths <= 500px using :nth-of-type pseudo-class selector.

Screencast:

Tested in Showcase Pro 2.0.0

Step 1

Install and activate Portfolio Post Type plugin. Add Portfolio items and upload/select featured images. In my test site, I have used images that are 800 x 600.

Step 2

In functions.php

replace

genesis_register_sidebar( array(
    'id'          => 'front-page-4',
    'name'        => __( 'Front Page 4', 'showcase' ),
    'description' => __( 'This is the 4th section on the front page.', 'showcase' ),
) );

with

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

>