Home / Snippets / Animation /

Magnetic hover

Four invisible hit zones sit over the dashed frame; hovering a corner pulls the floating card slightly toward that quadrant—no JavaScript, just sibling selectors and translate.

Featured project

Move the pointer around the frame to see the card follow.

Widely Supported
hoverno-js

Quick implementation

.magnetic-hover-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.magnetic-hover-demo__zone--tl:hover ~ .magnetic-hover-card {
  transform: translate(calc(-50% - 18px), calc(-50% - 12px));
}

Prompt this to your LLM

Hero tiles and portfolio grids.

You are faking “magnetic” hover without JS.

Goal: four invisible quadrant divs; hover on each adjusts the translate of a sibling card from center.

Constraints:
- Use general sibling combinator ~ so the card follows the active zone.
- prefers-reduced-motion: keep centered.

Return HTML + CSS.

Why this matters in 2026

Pointer-following affordances feel premium; a CSS-only approximation ships without bundle cost.

The logic

Zones are stacked above the card; only one zone hovers at a time, so one transform rule wins.

Accessibility & performance

Zones are decorative for pointer users; keyboard users see the static card—pair with a real focus style if the card is clickable.