<main id="main">

  <div class="card">
    <h2>Lorem ipsum dolor sit.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nobis veniam sit sint est temporibus eligendi neque ducimus doloribus facere doloremque, vel accusamus, eos ab iste. Eveniet atque alias consequatur.</p>
    <button>Read More</button>
  </div>

  <div class="overlay" aria-hidden="true">
    <!-- duplicate will go here -->
  </div>

</main>
.card {
  max-width: 50ch;
  border: 2px solid #333;
  padding: 3rem;
  border-radius: 0.5rem;

  h2 {
    border: 0;
  }

  .overlay & {
    /* rainbow background*/
    background: linear-gradient(
      45deg,
      hsl(0, 100%, 50%),
      hsl(60, 100%, 50%),
      hsl(120, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(240, 100%, 50%),
      hsl(300, 100%, 50%),
      hsl(360, 100%, 50%)
    );

    border-color: white;

    /*
    > * {
      filter: invert(1);
    }
    */
    h2 {
      text-shadow: 0 2px 2px black;
    }
    button {
      background: black;
    }
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  max-width: 100%;
  overflow: clip;
}

main {
  display: grid;
  place-items: center;
  position: relative;
  > * {
    grid-area: 1 / 1 / 2 / 2;
  }
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--opacity, 0);
  -webkit-mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
}
const main = document.querySelector("#main");
const content = main.querySelector(":scope > *");
const clone = content.cloneNode(true);
const overlay = document.querySelector(".overlay");
overlay.insertAdjacentElement("beforeend", clone);

const applyOverlayMask = (e) => {
  const overlayEl = e.currentTarget;
  const x = e.pageX - main.offsetLeft;
  const y = e.pageY - main.offsetTop;
  overlayEl.style = `--opacity: 1; --x: ${x}px; --y:${y}px;`;
};

document.body.addEventListener("pointermove", applyOverlayMask);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.