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.
Update on 5 Nov 2024: If you want to show a VIEW PROJECT link in hover state like this:
follow these steps instead:
1. Upload this svg icon image to your media library.
2. Paste this JSON (of the Section).
In the View Project element’s CSS, replace
/wp-content/uploads/2024/11/hexav2.svgwith that of your svg image.