Shimmer
No library Beginner
A diagonal light streak sweeps across the card on hover using a CSS ::after pseudo-element. Resets instantly on mouse-leave for a clean one-shot effect. Pure CSS, no dependencies.
Shimmer
Hover for shine
A diagonal light streak sweeps across the card on hover using a CSS ::after pseudo-element. Resets instantly on mouse-leave for a clean one-shot effect. Pure CSS, no dependencies.
Goal: Create a "Shimmer" card animation.
Visual behavior: On hover, a diagonal light streak (~60% wide, skewed ~10deg) sweeps from left to right across the card over ~600ms. It resets instantly on mouse-leave so the next hover triggers a fresh sweep.
Technique: position: relative on the card. A ::after pseudo-element spans the full card (position: absolute, inset 0) with a transparent linear-gradient that has a white semi-transparent highlight band in the center. Off-hover: translateX(-100%) skewX(-10deg), no transition. On :hover: translateX(200%) skewX(-10deg), transition: transform 600ms ease. The instant reset on leave is achieved by only applying the transition on the :hover state.
Accessibility: Animation hidden under prefers-reduced-motion (display: none on ::after).
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.