Thank you!

I will get back to you as soon as possible.
m
Oops! Something went wrong while submitting the form.
Please refresh the page, and try again.
Or... email me here: avivtech@gmail.com
Back to all Elements

Hover to reveal Mask

A fixed background image that is revealed by mouse hover all over the section
Live Example
Webflow Project Page (to Clone)
Cloneable
Code
Design

I recreated this codepen by @suez in Webflow.

Create the following hierarchy:

  1. Full page div/section
  2. Add a div with the size and shape of your mask revealer and a background image of your choice and position:absolute. Place it inside the full page section.
  3. Paste this code to your page custom code section, before </body> tag:

<script>
$(document).ready(function() {
 var $magic = $(".hover-div"),
     magicWHalf = $magic.width() / 2;
 $(document).on("mousemove", function(e) {
   $magic.css({"left": e.pageX - magicWHalf, "top": e.pageY - magicWHalf});
 });
});
</script>

Copy
  1. Replace the ".hover-div" with your Madk div classname (replace only the hover-div, keep the " " and the .
  2. Publish :) 
Copy
Copy

Preview:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more