In the members-only forum a user wrote:
On this page: http://avports.wpengine.com/airports/
I created a custom archive page for a CPT (used Pods plugin).The page looks as I want it to, with overlay and text color change on hover. However, the overlay hover is set with the title, so the photo itself is not a link – the title/words have to be clicked for the link to work. I am interested in converting this to a flex box layout, as I had to create several responsive breakpoints.
Can you advise how to code this to make it work better?
Thanks!Here is what I have:
...
In this tutorial we shall display entries of a Portfolio Custom Post Type (this tutorial can be applied to any CPT) in a grid of images with the titles overlayed in the middle in Genesis. The entire image area (vs just the title) will be linking to entry's permalink. We shall set a fallback image to be shown in case an entry does not have a featured image.
Also as long as the featured images are having the same dimensions 600px x 343px used in this example or in that aspect ratio or close, the entries will appear uniformly without having to use Flexbox or a jQuery script for equalizing heights.
We will add media queries to change the display from 3 columns to 2 columns and eventually to 1 per row as the screen size is reduced.
Screenshot:
Screencast:
Step 1
Add the following in child theme's functions.php:
