Bricks Query Loop Cards with Hover Image

Updated on 5 Nov 2024

This Pro tutorial shows how images uploaded to posts as the value of a 'Hover Image' field can be set to appear when the featured images in a Bricks posts query loop are hovered.

Step 1

[Optional] Let's register a new image size for the images.

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

add_image_size( 'project-image', 682, 430, true );

where project-image is your custom image size handle.

Step 2

Add a new field group for your post type having an image-type custom field named say hover_image.

Add/edit posts and set the hover image for each.

Step 3

Edit the single template for your post type with Bricks.

Copy the JSON of the fully-built Section from the link below and paste.

Note: ACSS classes are used.