Zoom Card

Media Card's sibling: the media scales up inside its own clipped frame on hover.

cards
card
effect
media
hover
zoom

Field notes

Hover to look closer.

Quick usage

usage

import { ZoomCard } from "@pinky-ui/components";

<ZoomCard media={<img src="/cover.jpg" alt="" />} title="Field notes" />

Presets

Default

A subtle 1.08x zoom.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add zoom-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
media	ReactNode	—	Required.
title	ReactNode	—	Required.
description	ReactNode	—	Optional.
zoom	number	1.08	How much the media scales on hover.
mediaAspect	"video" \| "square" \| "portrait"	"video"	Aspect ratio of the media frame.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.

Accessibility

The media slot has no built-in alt text — that belongs on the <img> the caller passes in.

Reduced motion

The zoom transform is skipped under prefers-reduced-motion: reduce — the card renders as a static Media Card.

When to use

Article previews, product photography, anywhere a hover zoom reads as an invitation to look closer

When not to use

Media that shouldn't crop past its frame at any zoom level — check the source image has margin to spare