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

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

3d Video Slider (swiper.js)

Cloneable

CMS

JavaScript

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

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Code

CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Glossary

Cloneable

JavaScript

CMS

A clonable for creating an Alphabetical glossary