Skip to content
Pinky UI

cursor

Hover Image Preview

A floating preview for a focused list row.

  • cursor

Live preview

Case study 01
Case study 02

Quick usage

usage
import { HoverImagePreview } from "@pinky-ui/effects";

<HoverImagePreview />

Install

Add @pinky-ui/effects 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/effects

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

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

HoverImagePreview and HoverImagePreviewItem reveal a floating image for a project, article, person or product row. The list stays semantic and scannable while imagery appears for the item being considered.

Use real links or buttons inside each item. Keep the preview around 220–320px wide, avoid covering the active row, and use one image at a time. Do not make the image the only way to identify or activate an item.

Pointer previews follow the pointer softly; keyboard focus anchors the preview beside the focused row. The preview is decorative and pointer-transparent, and it leaves the underlying text and focus order unchanged. Touch devices naturally use the normal list, while reduced motion keeps an immediate, quiet preview.

Open this skill on its own page