backdrop filter mask

by Soviut

HTML

<div id="overlay">
  this is an overlay
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
aliquam lacus, at pulvinar odio varius quis. Ut nec ipsum eu tortor ultricies
ultricies. Quisque libero ipsum, egestas nec nulla in, volutpat placerat enim.
Sed eu metus elit. Phasellus gravida lacus tellus. Donec suscipit ut augue nec
rhoncus. Etiam nisi lacus, rhoncus eu lacinia vitae, ullamcorper vel magna.
Praesent fringilla pretium rhoncus. Etiam sed maximus nisi, vel maximus sapien.
Proin purus ipsum, faucibus at interdum in, mattis et eros. Sed porttitor
blandit velit et eleifend. Aenean vel interdum nibh, id iaculis felis. Nulla
neque magna, iaculis a cursus eu, dapibus non sem. Nunc ullamcorper, leo sit
amet consectetur gravida, quam lectus blandit elit, sit amet semper nibh nunc
id augue. Sed aliquet, nulla tempus malesuada pretium, velit orci aliquam elit,
luctus blandit erat lorem vitae magna. Maecenas nec imperdiet sapien.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
aliquam lacus, at pulvinar odio varius quis. Ut nec ipsum eu tortor ultricies
ultricies. Quisque libero ipsum, egestas nec nulla in, volutpat placerat enim.
Sed eu metus elit. Phasellus gravida lacus tellus. Donec suscipit ut augue nec
rhoncus. Etiam nisi lacus, rhoncus eu lacinia vitae, ullamcorper vel magna.
Praesent fringilla pretium rhoncus. Etiam sed maximus nisi, vel maximus sapien.
Proin purus ipsum, faucibus at interdum in, mattis et eros. Sed porttitor
blandit velit et eleifend. Aenean vel interdum nibh, id iaculis felis. Nulla
neque magna, iaculis a cursus eu, dapibus non sem. Nunc ullamcorper, leo sit
amet consectetur gravida, quam lectus blandit elit, sit amet semper nibh nunc
id augue. Sed aliquet, nulla tempus malesuada pretium, velit orci aliquam elit,
luctus blandit erat lorem vitae magna. Maecenas nec imperdiet sapien.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque...

CSS

body {
  background-image: url('https://lorempixel.com/400/200/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999999;

  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 25%, 0% 25%,
    0% 100%, 100% 100%, 100% 50%, 0% 50%
  );
  pointer-events: none;
}

JavaScript

const portHeight = 100;
const halfHeight = portHeight / 2;
const overlay = document.getElementById('overlay')

document.addEventListener('mousemove', function(e) {
  const bounds = overlay.getBoundingClientRect()
  overlay.style = `
    clip-path: polygon(
      0px 0px, ${bounds.width}px 0px, ${bounds.width}px ${e.clientY - halfHeight}px, 0px ${e.clientY - halfHeight}px,
      0px ${bounds.height}px, ${bounds.width}px ${bounds.height}px, ${bounds.width}px ${e.clientY + halfHeight}px, 0px ${e.clientY + halfHeight}px
    )
  `
})