Hover Cards

How it works

The wrapper listens for pointermove. For each card it computes the cursor position relative to the card’s center, normalizes it to about -1…1, and sets CSS custom properties --pointer-x and --pointer-y on the card. The blurred icon and border highlight use those values with translate() and container query units so the spotlight follows the cursor per card.

// JS: set --pointer-x / --pointer-y per card (normalized from center)
const relativeX = e.clientX - (rect.left + rect.width / 2);
const x = relativeX / (rect.width / 2);
article.style.setProperty('--pointer-x', x.toFixed(3));

// CSS: move the icon layer with the pointer (50cqi = 50% of container width)
translate: calc(var(--pointer-x, -10) * 50cqi) calc(var(--pointer-y, -10) * 50cqh);