How to Add Image Reveal on Hover in Bricks Builder with BricksFly

Want to add some magic when users hover? Impress your visitors with cool image effects that respond to their mouse movements.

The Image Hover Effect brings life and interaction to your content, making your website more exciting and visually appealing. Don’t miss the chance to make your site more interactive—just follow these simple steps to make it more engaging.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Image Reveal On Hover In BricksFly

1. Go to your WordPress Dashboard.
2. Click on BricksFly.
3. Head to the Extension tab.
4. Under Effects, toggle on Image Reveal On Hover.

Step 1: Choose Your Target Element & Enable the Wrapper

• Select the element you want to apply the image hover effect to, then click on the container to enable the wrapper.

• Next, click on ‘Image Reveal On Hover’ and toggle the ‘Enable’ switch to ‘Yes’.

Step 2: Add & Resize Your Hover Image

Follow the process below to add your image and adjust the width and height settings.

Choose Image

First things first, choose any image you’d like to appear when hovering over a specific element on your website.

In this example, an image of team members working on a project is selected. You can choose any image based on your design needs.

Width 

To display the image accurately on hover, set its width to 300px. You can experiment with different values, but keep in mind that 300px is generally an ideal width for showing an image when hovering over a specific element on your website.

Heights

To make sure your image looks good when someone hovers over it, try setting the height to 250px. You can adjust it based on your layout, but 250px tends to work well and keeps the image looking clean and balanced.

Step 3: Adjust Position and Layering

Place your content exactly where you want and decide what appears in front or behind—on any device.

Position Top

Position Top controls how far the hover content or overlay appears from the top of the image. In this example, the value is set to 30px, which places the content 30 pixels below the top edge. However, you can adjust this value to position the content exactly where you want it.

Position Left

Position Left controls how far the hover content or overlay appears from the left side of the image. In this example, the value is set to 30px, which moves the content 30 pixels away from the left edge. However, you can adjust this value based on your design needs.

Z-index

Z-index lets you choose what shows on top when things overlap on your page. A higher number brings something to the front, and a lower number keeps it behind.

If your hover content isn’t showing, it might be hidden under something—just raise the Z-index to bring it forward.

You can increase or decrease the value based on your needs. However, by default, the value is set to 9999.

Final Result