Hover on a mouse, a button on a phone

Cards that reveal detail on hover, and grow a labelled button on a phone.

71 / Interaction

Mill House
Barn conversion
Oak frame kept, glazing to the south, 14 weeks on site.
Mill House
Orchard Lane
New build
Two storeys, timber cladding, air source heat.
Orchard Lane
The Old Forge
Extension
Single storey, zinc roof, planning in 9 weeks.
The Old Forge

Hover a card, or Tab to it: the details appear either way. Then switch to “On a phone”.

Remake it

Build one interactive web page: Project cards that reveal detail on hover and keyboard focus, and grow a labelled button on a phone.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Any hover micro-interaction the skill recommends. Do not let it fail the way this kind of piece usually does: An invisible tap target, or a reveal that a keyboard can never reach.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: Any hover micro-interaction the skill recommends.
When it does not: Information a visitor needs before deciding. Do not hide it behind hover at all.
How it fails: An invisible tap target, or a reveal that a keyboard can never reach.

Measured on: landonorris.com · T8. Built from scratch for an invented business; nothing here comes from the site studied.