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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Register for full access

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

CSS Grid Columns Custom Fields

Reader Interactions

Comments

  1. Debbie Hastings says

    March 7, 2018 at 8:32 pm

    Couldn’t get this to work for me. I’m creating a CPT archive template and no configuration of this information helped. Any thoughts?

    Log in to Reply
    • Brad Dalton says

      March 7, 2018 at 8:39 pm

      Try this template https://wpsites.net/web-design/archive-template-with-featured-image-hover-overlay/

      Are you using custom fields?

      What theme are you using?

      Also note, this won’t work on archive pages, only with custom fields.

      What are you trying to do? Please link to a example.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.