Custom Field Grid With Image Hover Overlay Effect In Genesis Page Template

This tutorial includes 2 templates which display a grid of images. The images are added via custom fields and can be displayed in a 2, 3, 4 or 6 column responsive grid.

The template named five.php uses CSS for columns enabling you to display a 5 column grid.

The 2 templates are coded differently however they both enable you to update/add to the grid simply by using the same custom field name with unique HTML for each image and image link in the value field.

Demo Video

Shows both templates and how to add more fields which display linked images using HTML. Also shows the responsiveness of the columns in the grid on smaller screens and the image hover overlay effect.

3 Columns

Shows unlimited custom fields in a 3 column grid with text overlay displayed on hover:

4 Columns

Shows unlimited fields in a 4 column grid with text overlay displayed on hover :

5 Columns

Shows unlimited fields in a 5 column grid. Text overlay will display on hover :

6 Columns

Shows unlimited fields in a 6 column grid. Text overlay will display on hover :

Icon Overlay

You can also replace the overlay image title with a icon. Swap out the HTML with the following and replace the dashicon with any other. You’ll also need to make sure your theme loads dashicons from functions.php.

Template Installation

There’s 4 steps you need to follow after downloading the templates folder below for logged in members :

Step 1 : From the download folder, upload the 2 files named four.php & five.php to your child themes root directory.

Step 2 : Create a new page and choose either template from the Templates drop down menu in the Page Attributes meta box.

Step 3 : From the download folder, copy the CSS from the style.css file to the end of your child themes style.css file. Clear caching.

Related Tutorials

• Add Text Overlay To Featured Image Hover On Single Posts
• Archive Template With Featured Image Hover Overlay
• Genesis Column Classes In foreach Loop