A web component to add a three-dimensional hover effect to any arbitrary content.
Full credit to this 3D card hover effect CodePen from Mark Mironyuk.
- Demo
- In use on the registration flow for
conf.11ty.dev.
- In use on the registration flow for
- Blog post
- Respects
prefers-reduced-motion. - Customize scale with
--hypercard-scaleCSS custom property.
You can install via npm (@zachleat/hypercard) or download the hypercard.js JavaScript file manually.
npm install @zachleat/hypercard --saveAdd hypercard.js to your site’s JavaScript assets.
<hyper-card>Hello.</hyper-card>The default value is 1.07.
<hyper-card style="--hypercard-scale: 1.03">Hello.</hyper-card>