Card framed on hover
An offer card around which four frame corners slide into place on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress
Description
When the card is hovered, or as soon as its link receives keyboard focus, four corner brackets move into place like a camera viewfinder, and the card lifts off with a soft shadow. Ideal for a service, a plan or a flagship product: photographer, studio, coach or agency. Only the corners' position and opacity are animated, with no image or script, AA contrast in light and dark mode. With prefers-reduced-motion the frame is shown from the start, without movement.
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