Sep 5, 2020

Back to all Elements

Hover to reveal Mask

A fixed background image that is revealed by mouse hover all over the section

Webflow Project Page (to Clone)

I recreated this codepen by @suez in Webflow.

Create the following hierarchy:

Full page div/section
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.
Paste this code to your page custom code section, before </body> tag:

<script>
document.addEventListener('DOMContentLoaded', (ev) => {
const circle = document.querySelector('.hover-div');
const circleHalf = circle.offsetWidth / 2;

addEventListener("mousemove", (e) => {
console.log(e.pageX, e.pageY);
circle.style.left = e.pageX - circleHalf + "px";
circle.style.top = e.pageY - circleHalf + "px";
});
});
</script>

Replace the ".hover-div" with your mask (circle) div classname (replace only the hover-div, keep the ' ' and the .
Publish :)

Preview:

browser mockup

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Scaleable Vanilla JS Nested Tabs

JavaScript

Cloneable

Code

Nested tabs in an accordion template

Buttons Hover Interactions

Cloneable

Interactions

A small collection of buttons and hover interactions.

3d Video Slider (swiper.js)

Cloneable

CMS

JavaScript

A 3d slider with video items, plays and pauses on click & slide change.