zachleat/hypercard

Web component to add a three-dimensional hover effect to a card.

hypercard

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.
• Blog post

Features

• Respects prefers-reduced-motion.
• Customize scale with --hypercard-scale CSS custom property.

Installation

You can install via npm (@zachleat/hypercard) or download the hypercard.js JavaScript file manually.

npm install @zachleat/hypercard --save

Add hypercard.js to your site’s JavaScript assets.

Usage

<hyper-card>Hello.</hyper-card>

Not quite as big on hover

The default value is 1.07.

<hyper-card style="--hypercard-scale: 1.03">Hello.</hyper-card>