• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Display Genesis Featured Posts In Horizontal Grid With Overlay Title On Hover

This tutorial shows you one way to use the Genesis Featured Posts widget to display posts in horizontal columns like you see in the Brunch Pro child theme by Shay Bocks :

Based on this question from a member of the Genesis community :

Does anyone know of a tutorial on how to get recent/featured posts to display like this?

Update : Here’s a new tutorial using the latest version of Genesis.

And here’s what the code produces when used in the Genesis Sample child theme by StudioPress.

Demo Video

Shows the responsiveness of the columns on smaller screens.

Code Installation

There’s 2 – 3 simple steps :

  1. # Copy the PHP code ( excluding the opening PHP tag ) from the functions.php file inside the download folder, to the end of your child themes functions file.
  2.  

    Step 1

  3. # Paste the CSS at the end of your child themes style.css file.

 

Step 2

That’s all you need to do unless you want to add the following image hover effects.

Download Folder

Show Title On Featured Image Hover

This solution provides the best method for displaying content over the featured images generated by the Genesis Featured Posts Widget.

If you want a free solution to add the overlay which displays the entry title on hover, use the following CSS which may need tweaking :

Here’s the overlay effect :

Step 3 : Drag the Genesis Featured Posts widget into the home top widget area and configure the widget settings as seen in the following screenshot:

This is one way to display featured posts in columns. There are many others you’ll find here on WP SITES.

Related Tutorials

  • Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Bunch Pro
  • How To Overlay Title & Featured Image Attachment Details Using Genesis Featured Posts Widget
  • Template Showing Genesis Featured Posts With Featured Image Hover Overlay
  • Archive Template With Featured Image Hover Overlay

Brunch Pro Theme Featured Image Genesis Featured Posts Grid Columns

Reader Interactions

Comments

  1. D says

    March 18, 2018 at 10:22 pm

    I’m trying to use this with Featured Pages widget. Should I change something?

    Log in to Reply
    • Brad Dalton says

      March 18, 2018 at 10:28 pm

      Something like this should work with the featured page widget

      .your-div {
      	background-color: #fff;
      	clear: both;
      	overflow: hidden;
      	padding: 60px 30px 0;
      }
      
      .your-div .widget {
      	float: left;
      	padding: 0 2.8%;
      	width: 33.33333333333%;
      }
      
      
      .your-div .widget:nth-of-type(3n+1) {
      	clear: left;
      }

      Change .your-div to match your class and clear caching.

      The overlay is only supported for registered users.

      Log in to Reply
  2. jodie says

    January 3, 2018 at 2:13 pm

    Hi, I’ve followed all the steps but for some reason it won’t work for me? It still turns out vertical not horizontal. Any idea why?

    Log in to Reply
    • Brad Dalton says

      January 3, 2018 at 3:12 pm

      Check the widget settings and make sure you have selected the correct image size and clear caching.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems