Figma Mastery for Web Designers Launch!

Lytbox Academy Main Logo Light Version
Pro MembershipsFigma MasteryBlogContact
Join the AcademySign In
Bricks Builder Tuts

Background Image Reveal on Hover Effect For Bricks Builder

Jeffrey at Lytbox
Table of Contents

In this tutorial, you’ll learn how to create a ‘flashlight’ effect in Bricks, using CSS…

In this tutorial, you’ll learn how to create a ‘flashlight’ effect in Bricks, using CSS and JavaScript. This effect reveals the background image as the cursor moves over the section, creating a smooth and engaging hover interaction.

A big thanks to Bricksforge for inspiring this tutorial!

I made this effect for Elementor but found Bricks has a slight different approach since it has the ability to add pseudo-classes. What this means is we can add the background image we want revealed inside Bricks natively without the need for extra CSS.

Steps To Reveal Background Images On Hover Effect

Step 1: Set Up The Section In Bricks

  • Add a new section you want your effect (this can also be in containers and blocks to create the effect in cards)
  • Add the class “.cursor-flashlight” to the section/container/block
  • Set your background color starting at .85 opacity (the more opacity you give, the brighter your image will be revealed)
  • Set your background overlay – This needs to be solid and the same color as the background color

Step 2: Add the CSS

It’s best to add CSS for effects like this to a code management plugin. My recommendations are WP Codebox for a pro-level code plugin and FluentSnippets for a free code plugin.

Add the CSS below:

:root {
    --cursor-flashlight-speed: .2s; /* Adjust the cursor effect speed here */
    --cursor-flashlight-timing: linear;
}

/* ! Do Not Edit Below! */

:root {
    --mouse-x: unset;
    --mouse-y: unset;
    transition: --mouse-x var(--cursor-flashlight-speed) var(--cursor-flashlight-timing),
                --mouse-y var(--cursor-flashlight-speed) var(--cursor-flashlight-timing);
}


@property --mouse-x {
    syntax: "<percentage> | <length>";
    inherits: true;
    initial-value: 0px;
}

@property --mouse-y {
    syntax: "<percentage> | <length>";
    inherits: true;
    initial-value: 0px;
}

.cursor-flashlight {
    position: relative;
    overflow: hidden;
}

.cursor-flashlight:before {
    mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 350px );
    -webkit-mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 350px );
}

.cursor-flashlight:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Step 3: Add the JS Snippet

document.addEventListener('DOMContentLoaded', function () {
    let cursor;
    
    if (document.querySelectorAll('.cursor-flashlight')) {
        cursor = document.querySelector('.cursor-flashlight');
    }
    
    cursor.addEventListener('mousemove', (event) => {
        const rect = cursor.getBoundingClientRect();
        const mouseX = ((event.clientX - rect.left) / rect.width) * 100 + '%';
        const mouseY = ((event.clientY - rect.top) / rect.height) * 100 + '%';
    
        document.documentElement.style.setProperty('--mouse-x', mouseX);
        document.documentElement.style.setProperty('--mouse-y', mouseY);
    });
});

Step 4: Add Background Image Using the :after Pseudo Element

If you’re using a jpg for your background image the normal way into Bricks, it can make the effect choppy and doesn’t look good. As a workaround, I found adding the image with the :after pseudo-element it comes out smooth.

Screenshot highlighting CSS pseudo-class in Lytbox Academy interface
  • In your section, navigate to your pseudo elements and select after (if it isn’t showing type in after and save)
  • With the :after activated, navigate to your Style > Background and add your background image
  • Deselect your :after and adjust the background color’s opacity to get your desired effect

That’s it! It’s super dope. Make sure to watch the video tutorial to understand better how to use this.

Join the Lytbox Newsletter

Small Subscription Form

Join the Lytbox Crew & Get Web Design Goodies.

By subscribing to the Lytbox newsletter you'll get web design updates, insights, and fun web design stuff!

Newsletter Popup Form

By subscribing, you agree to our Privacy Policy and consent to receive updates from Lytbox Academy.