Skip to Content

<hyper-card> Web Component

A large assortment of UNO cards spread on a flat surface. A wild card sits in the middle

February 21, 2024

<hyper-card> is a web component that adds a three-dimensional hover effect to any arbitrary content. Full credit to this 3D card hover effect CodePen from Mark Mironyuk. Used on the registration flow for conf.11ty.dev.

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>

Tags: Project Web Components

Poster image by Karla Hernández

< Newer
Older >

Zach Leatherman is a builder for the web at CloudCannon. He is the creator and maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

9 Reposts

7 Likes

2 Comments

Zach Leatherman :verify:
21 Feb 2024

This is the last entry in my #11yConf web component series! If you’d like to learn more about how the ticketing and registration piece of https://conf.11ty.dev/ was built—tune in later today to the Static Web Development Happy Hour with Mike and Zach: https://www.twitch.tv/cloud… Truncated
Aaron In Iowa
21 Feb 2024

@zachleat fun! got a spot I am tempted to use this on right away.

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.