<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.