https://github.com/zachleat/hypercard
Web component to add a three-dimensional hover effect to a card.
https://github.com/zachleat/hypercard
Last synced: about 1 year ago
JSON representation
Web component to add a three-dimensional hover effect to a card.
- Host: GitHub
- URL: https://github.com/zachleat/hypercard
- Owner: zachleat
- License: mit
- Created: 2024-02-16T16:14:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T14:30:36.000Z (over 2 years ago)
- Last Synced: 2025-04-23T13:08:54.431Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://zachleat.github.io/hypercard/demo.html
- Size: 9.77 KB
- Stars: 51
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hypercard
A web component to add a three-dimensional hover effect to any arbitrary content.
**Full credit to this [3D card hover effect CodePen](https://codepen.io/markmiro/pen/wbqMPa) from [Mark Mironyuk](https://www.markmiro.com/).**
* [Demo](https://zachleat.github.io/hypercard/demo.html)
* In use on the registration flow for [`conf.11ty.dev`](https://conf.11ty.dev/).
* [Blog post](https://www.zachleat.com/web/hypercard/)
## Features
* Respects `prefers-reduced-motion`.
* Customize scale with `--hypercard-scale` CSS custom property.
## Installation
You can install via `npm` ([`@zachleat/hypercard`](https://www.npmjs.com/package/@zachleat/hypercard)) or download the `hypercard.js` JavaScript file manually.
```shell
npm install @zachleat/hypercard --save
```
Add `hypercard.js` to your site’s JavaScript assets.
## Usage
```html
Hello.
```
### Not quite as big on hover
The default value is `1.07`.
```html
Hello.
```