collections
Hover Image Reveal
A minimal editorial list keeps text primary while one fixed media viewport reveals the active item.
- collections
- list
- image
- editorial
- reveal
Fixed editorial media viewport; the text list stays primary.
Live preview
- North room
Quick usage
import { HoverImageReveal } from "@pinky-ui/systems";
<HoverImageReveal items={projects} label="Selected projects" />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add hover-image-revealPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | HoverImageRevealItem[] | — | Editorial labels with controlled media surfaces. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- A single media region changes instead of mounting one image wall per row.
- Touch uses selection and an inline preview rather than a hover dependency.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Fashion, portfolio and design indexes where imagery confirms the text
When not to use
- Product comparison grids or lists where media is essential to every row
Skill
Purpose
Use a minimal editorial list when text should stay primary and one fixed media viewport should reveal the item under pointer or focus. It is a browsing composition, not a grid of image cards.
Interaction anatomy
- The ordered text list remains visible and readable at rest.
- Hover or focus changes one shared media region.
- On mobile, tapping a row reveals the same media inline below that row.
Good for
Fashion, design, portfolio and publication indexes where images add atmosphere or recognition.
Avoid
Commerce comparison, simultaneous image inspection or lists where every image is essential to the decision.
Usage
<HoverImageReveal
label="Selected work"
items={work.map((item) => ({
id: item.id,
label: item.title,
meta: item.year,
media: <img src={item.image} alt="" />,
}))}
/>Tune
Use one shared viewport, short labels and fixed media geometry. Let the image support the row instead of making the row wait for a decode.
Accessibility and reduced motion
Rows are buttons with aria-pressed; focus activates the same state as hover. Keep meaningful text outside the image. Reduced motion swaps the media immediately and preserves the active row.