The Listing Deck

Five homes in one stack of cards. Rest on the deck and it fans open in perspective; hover a home and it lifts out with its name; click it and the page opens that listing.

A gallery of five that behaves like a deck of cards. The visitor reaches in: the deck fans open in real perspective when they hover, the card under the cursor lifts and names itself, and a click opens it. It feels like being handed a short stack of Polaroids by someone who has already done the sorting.

How it works

The deck is five cards sharing one position, each with an index. At rest the index does three small things: it moves each card up by a fixed step so the ones behind peek above the one in front, shrinks it a little, and darkens it, which is what turns a pile of images into a tidy stack. When the pointer enters the deck a class on the stage rotates it in real CSS perspective and the same index now pushes each card sideways and backwards along the z axis, so the stack fans out into a row that recedes into the dark. Hovering one card lifts it up and toward the camera and reveals a white pill with its number and name. Leaving the deck reverses everything. Clicking a card fills the listing section below with that home's photo, price, facts and description and scrolls to it. On touch screens a tap opens the deck, a second tap lifts a card and a third chooses it.

When to use it

Dressed here as a property agency, HAVEN, with five homes. It suits anything sold in short editions: this week's listings, a restaurant's tasting menus, a studio's project shortlist, a travel agency's trips this season.

Why it works

A curated few beats a searchable many when judgement is the product. The deck makes curation visible: five things, each one lifted and named by hand. It is pure CSS, so it is light and it runs on a phone.

Recommended for

Common questions

Why does the stack look like real cards at rest?

Each card behind the front one is nudged up, scaled down a few percent and darkened by a step. Those three small offsets are what the eye reads as a physical stack rather than five images on top of each other.

Is the 3D turn a video or a library?

Neither. The stage has CSS perspective and preserve-3d, and one class rotates it. The cards move along the z axis with translateZ, so the spread is real depth: the further cards genuinely get smaller and the lift genuinely comes toward you.

Does the hover work on a phone?

There is no hover on a phone, so the deck goes by taps: one tap opens it, tapping a card lifts it, tapping the lifted card opens the listing. Tapping anywhere else closes the deck.