JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="photo">
  <img src="https://images.freeimages.com/images/large-previews/0c4/grapes-splash-1636085.jpg" alt="" class="mask">
  <img src="https://images.freeimages.com/images/large-previews/0c4/grapes-splash-1636085.jpg" alt="" class="bg">
</div>

SCSS

:root {
  --pos-x: 50%;
  --pos-y: 50%;
}

.photo {
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    &.mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      clip-path: circle(80px at var(--pos-x) var(--pos-y));
    }
    &.bg {
      filter: grayscale(100%);
    }
  }
}

JavaScript

const photo = document.querySelector('.photo');
const mask = document.querySelector('.mask');
/* console.log(mask); */

photo.addEventListener('mousemove', e => {
  let posX = e.x;
  let posY = e.y;
  mask.style.setProperty("--pos-x", `${posX}px`)
  mask.style.setProperty("--pos-y", `${posY}px`)
})