Our Divi FilterGrid plugin makes it easy to display a grid of posts on your Divi website. It also makes it easy to display the featured image, title, meta, content and custom fields. By default, the featured image is displayed along with an overlay with icon when the user hovers over the post.
In the following tutorial, we’ll show you how to display a different image when the post is hovered instead of displaying the overlay. We’ll use the custom overlay filter hook to achieve this.
In our example, the “hover” image will come from an Advanced Custom Field image field. This makes it easy to display a different hover image for each post.
The first step is to add the “dfg-custom-overlay-image” class to your Divi FilterGrid module in the module’s Advanced tab -> CSS ID & Classes -> CSS Class field. By doing this, we’re limiting the filter hook to only apply to modules with this class assigned.
Next, we need to add the following code to our child theme’s functions.php file or using a plugin like Code Snippets:
Notice on line 4 we are retrieving the image using the Advanced Custom Fields get_field() function. Make sure you replace “hover_image” with the name of your image custom field. Also make sure the Return Format of the ACF image field is “Image Array”.
That’s it! Once the code above is added, it will display a hover image when the post is hovered on in the grid (assuming you have assigned an image to the custom field for that post). Make sure you have the Show Overlay toggle turned on in the module’s Content tab -> Posts Elements section for this to work.
* Notice on line 12 that we are setting the size of the thumbnail image using the name of the thumbnail. To use a different thumbnail size, you can reference our WP and Divi thumbnail image name and size list and use one of those instead.
