Spotlight Reveal

<!-- Spotlight Reveal — pans automatically; add the JS tab for pointer-tracking -->
<figure class="nuda-ie2-spotlight">
  <img class="nuda-ie2-spotlight__dim" src="/your-image.jpg" alt="Photo" />
  <img class="nuda-ie2-spotlight__bright" src="/your-image.jpg" alt="" aria-hidden="true" />
  <span class="nuda-ie2-spotlight__hint" aria-hidden="true">Hover</span>
</figure>

/* Spotlight Reveal — pointer-tracked variant.
   Drop this in to make the spotlight follow the cursor. */

(function () {
  document.querySelectorAll('.nuda-ie2-spotlight').forEach(function (el) {
    var bright = el.querySelector('.nuda-ie2-spotlight__bright');
    if (!bright) return;

    el.addEventListener('pointermove', function (e) {
      var r = el.getBoundingClientRect();
      var x = ((e.clientX - r.left) / r.width) * 100;
      var y = ((e.clientY - r.top) / r.height) * 100;
      bright.style.animation = 'none';
      bright.style.webkitMaskPosition = x + '% ' + y + '%';
      bright.style.maskPosition = x + '% ' + y + '%';
    });

    el.addEventListener('pointerleave', function () {
      bright.style.animation = '';
      bright.style.webkitMaskPosition = '';
      bright.style.maskPosition = '';
    });
  });
})();

.nuda-ie2-spotlight {
  position: relative;
  width: 200px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  margin: 0;
}

.nuda-ie2-spotlight__dim {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(60%) brightness(.45) contrast(1.05);
}

.nuda-ie2-spotlight__bright {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) brightness(1.05);
  -webkit-mask-image: radial-gradient(circle 46px,#000 55%,transparent 100%);
  mask-image: radial-gradient(circle 46px,#000 55%,transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -10% 20%;
  mask-position: -10% 20%;
  animation: _nuda-ie2spotlight 7s ease-in-out infinite;
  will-change: mask-position;
}

.nuda-ie2-spotlight__hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font: 700 8px ui-sans-serif,system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fafafa;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  opacity: .75;
  pointer-events: none;
}

@keyframes _nuda-ie2spotlight {
  0%,100% {
    -webkit-mask-position: -10% 20%;
    mask-position: -10% 20%;
  }
  50% {
    -webkit-mask-position: 110% 85%;
    mask-position: 110% 85%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ie2-spotlight__bright {
    animation: none !important;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
  }
}