See through an absolute div on mouse move

Question

I'm trying to create some kind of flashlight effect. I have a div (fixed, radiant background, height and width 100%) masking the entire screen. On mouse move, I'd like to reveal what is behind the div in a flashlight way.

I don't find a way to make a portion of this div transparent (opacity: 0). See example attached:

The "Pré-inscription" button appears on mouse over, the gradiant remains around the mouse cursor (the circle is too small on the screenshot, I will make it bigger)

EDIT: for a better understanding, I created a Codepen. As you can see, the fixed radiant gradiant. The red circle should allow to see through the gradiant.

let magnifier = document.getElementById('magnifier')
let size = magnifier.offsetWidth

window.addEventListener('mousemove', (e) => {
  magnifier.style.top = e.clientY - (size / 2)+'px'
  magnifier.style.left = e.clientX - (size / 2)+'px'
  
})

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgb(255,215,108);
  background: radial-gradient(circle, rgba(251, 92, 3, 1) 0%, rgba(255,215,108,1) 100%);
}

#magnifier {
  position: absolute;
  background: red;
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  top: -20rem;
  left: -20rem;
}

<h1 class="text-7xl">Coming soon</h1>

<div id="overlay">
  <div id="magnifier"></div>
</div>

Any idea? Thanks

Axel

Answer 1

You could try something with an overlay with an inset shadow which tracks the mouse location.

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
  var eventDoc, doc, body;

  eventDoc = (event.target && event.target.ownerDocument) || document;
  doc = eventDoc.documentElement;
  body = eventDoc.body;

  event.pageX = event.clientX +
    (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
    (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY +
    (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
    (doc && doc.clientTop  || body && body.clientTop  || 0 );

  const spotlight = document.getElementById("spotlight");
  const boundingRect = spotlight.getBoundingClientRect();
  spotlight.style.left = `${event.pageX - boundingRect.width/2}px`
  spotlight.style.top = `${event.pageY - boundingRect.height/2}px`
}

html, body {
  margin: 0;
}

.bigoverlay {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.spotlight {
  border-radius: 50%;
  width: 250vmax;
  height: 250vmax;
  box-shadow: 0 0 5vmax 110vmax inset black;
  position: absolute;
  z-index: -1;
  left: -75vmax;
  top: -75vmax;
}

<div class="bigoverlay" id="bigoverlay">
    <h1>Some hidden text</h1>
    <div class="spotlight" id="spotlight"></div>  
</div>

Answer 2

To create a flashlight effect that reveals content behind a div on mouse move, you can use CSS and JavaScript. Here's an example

document.addEventListener('mousemove',
  function(event) {
    var flashlight =
      document.querySelector('.flashlight');
    var x = event.clientX;
    var y = event.clientY;
    var radius = 100;
    flashlight.style.backgroundPosition =
      x + 'px ' + y + 'px';
    flashlight.style.backgroundSize =
      radius + 'px ' + radius + 'px';
  });

.flashlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 9999;
}

<div class="flashlight"></div>

In this code, we have a fixed div with the class "flashlight" that covers the entire screen. It has a radial gradient background that starts with a dark color (rgba(0, 0, 0, 0.8)) and transitions to transparent, creating a flashlight effect.

We use JavaScript to listen for the mousemove event on the document. On each mouse move, we update the background position of the div to match the mouse coordinates (x, y). This makes the center of the flashlight follow the mouse cursor. We also set the size of the background to create the desired radius for the flashlight effect.