Creating Custom Monochromatic Cursor Effect in Divi

Fun Follow-the-Mouse effect with CSS Blend Modes!

In this short tutorial, I am going to show you how to recreate the custom cursor effect we recently included in the Black Friday Landing Page layout.

We are going to use the CSS mix-blend-mode property and some jQuery code to make it happen. Watch the step-by-step walkthrough video and copy the code we used below!

If you’re our subscriber feel free to download the JSON file!

First, the Divi Builder structure

This is a simple two-column layout with bold typography. Using two different column colors allows for a surprising hover, follow-the-mouse experience. The content of each column can change, but it’s best to keep it in black/white colors only.

In our example, the parent section uses a custom CSS class of dl-bf-hero.

Next, the jQuery element

To make sure that the CSS mix-blend-mode property works across both columns, our cursor element needs to be a sibling of a parent row. The jQuery function below appends the new div with a CSS class of cursor inside the section (right after our row).

jQuery(document).ready(function($){
    $('.dl-bf-hero').append('<div class="cursor"></div>');
  });

Styling the element!

Here is the CSS code we used to style the new element:

.cursor {
    position: fixed;
    top:0;
    left:50%;
    width:400px;
    height:400px;
    background:#fff;
    border-radius:50%;
    z-index:2;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
 }

Finally, move it with the cursor position!

This bit of jQuery will make sure, that the element top and left position are updated automatically when the user cursor position changes within the browser window.

$(window).mousemove(function(e){
      $('.cursor').css({
        top: e.clientY,
        left: e.clientX
      });
    });

And final jQuery code looks like this:

jQuery(document).ready(function($){
    $('.dl-bf-hero').append('<div class="cursor"></div>');
    $(window).mousemove(function(e){
      $('.cursor').css({
        top: e.clientY,
        left: e.clientX
      });
    });
  });

Here’s the final effect!

What do you think?

We would love to see how you might use this effect in action! Please share your creative ideas in the comments below!

We always appreciate your feedback, so let us know in the comments what you think!