Zach’s ugly mug (his face) Zach Leat­herman

<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 96594

<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

IndieWeb Avatar for https://unsplash.com/Poster image by Karla Hernández

< Newer
Panel Discussion: What's next for Jamstack?
Older >
webcare-webshare Web Component

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

9 Reposts

Bruce B AndersonAaron In IowaThe Spicy WebChris BurnellBob MonsourJean Pierre KolbgapmissKhalid ⚡️IndieWeb Avatar for https://www.alvinashcraft.com

10 Likes

FlohGromikeKeenanChris SmithAaron In IowaChris BurnellMatt SteinOliver SchafeldJean Pierre KolbKhalid ⚡️
4 Comments
  1. Zach Leatherman :verify:

    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

  2. Aaron In Iowa

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

  3. mike

    @zachleat @robb I have so little excitement in my life. Let me *steal*.

  4. Robb Knight

    @crashthearcade @zachleat wait until you find out about the view source function in browsers non-technical managers HATE this one weird trick

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)

Post published and built