├── script.js
├── index.html
└── style.css
/script.js:
--------------------------------------------------------------------------------
1 | console.clear();
2 |
3 | const cardsContainer = document.querySelector(".cards");
4 | const cardsContainerInner = document.querySelector(".cards__inner");
5 | const cards = Array.from(document.querySelectorAll(".card"));
6 | const overlay = document.querySelector(".overlay");
7 |
8 | const applyOverlayMask = (e) => {
9 | const overlayEl = e.currentTarget;
10 | const x = e.pageX - cardsContainer.offsetLeft;
11 | const y = e.pageY - cardsContainer.offsetTop;
12 |
13 | overlayEl.style = `--opacity: 1; --x: ${x}px; --y:${y}px;`;
14 | };
15 |
16 | const createOverlayCta = (overlayCard, ctaEl) => {
17 | const overlayCta = document.createElement("div");
18 | overlayCta.classList.add("cta");
19 | overlayCta.textContent = ctaEl.textContent;
20 | overlayCta.setAttribute("aria-hidden", true);
21 | overlayCard.append(overlayCta);
22 | };
23 |
24 | const observer = new ResizeObserver((entries) => {
25 | entries.forEach((entry) => {
26 | const cardIndex = cards.indexOf(entry.target);
27 | let width = entry.borderBoxSize[0].inlineSize;
28 | let height = entry.borderBoxSize[0].blockSize;
29 |
30 | if (cardIndex >= 0) {
31 | overlay.children[cardIndex].style.width = `${width}px`;
32 | overlay.children[cardIndex].style.height = `${height}px`;
33 | }
34 | });
35 | });
36 |
37 | const initOverlayCard = (cardEl) => {
38 | const overlayCard = document.createElement("div");
39 | overlayCard.classList.add("card");
40 | createOverlayCta(overlayCard, cardEl.lastElementChild);
41 | overlay.append(overlayCard);
42 | observer.observe(cardEl);
43 | };
44 |
45 | cards.forEach(initOverlayCard);
46 | document.body.addEventListener("pointermove", applyOverlayMask);
47 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 | Pricing
14 |
15 |
16 |
17 |
Basic
18 |
$9.99
19 |
20 | - Access to standard workouts and nutrition plans
21 | - Email support
22 |
23 |
Get Started
24 |
25 |
26 |
27 |
Pro
28 |
$19.99
29 |
30 | - Access to advanced workouts and nutrition plans
31 | - Priority Email support
32 | - Exclusive access to live Q&A sessions
33 |
34 |
Upgrade to Pro
35 |
36 |
37 |
38 |
Ultimate
39 |
$29.99
40 |
41 | - Access to all premium workouts and nutrition plans
42 | - 24/7 Priority support
43 | - 1-on-1 virtual coaching session every month
44 | - Exclusive content and early access to new features
45 |
46 |
Go Ultimate
47 |
48 |
49 |
50 |
51 |