Holographic hover card
A card that lifts on hover while an iridescent shine sweeps diagonally across it, like a holographic card.
- Tailwind
- React
- CSS
- WordPress
Description
On hover and on keyboard focus the card lifts and turns one degree, its shadow lengthens and a pink, cyan and gold shine slides diagonally across it. Ideal for a loyalty card, a subscription or an offer to highlight. The shine is a simple fading gradient hidden from screen readers, and the white text keeps AA contrast on the indigo background. With prefers-reduced-motion the card stays still and the shine appears without sliding.
Code
Loading the code…
In the same spirit
A large heading in hollow letters where each word fills with colour from left to right, one after another.
- Tailwind
- React
- CSS
- WordPress
A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.
- Tailwind
- React
- CSS
- WordPress
An integrations pitch where seven icons slowly circle a logo on two orbits.
- Tailwind
- React
- CSS
- WordPress
An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress