Hover Card

Contextual information delivery with a premium touch. Perfect for explanatory text, bios, or rich previews.

1 Variant

CLI Install

Historical Image Hover Card

A rich, storytelling component that reveals historical context and high-quality imagery on hover. Features back-drop blur, reveal animations, and stylized typography.

The Chronicles of Kings

Throughout history, few names resonate as powerfully as Ashoka the Great who turned from a fierce conqueror to a messenger of peace. His influence stretched across the Silk Road, much like the opulence displayed by Louis XIV in the courts of France. While one built a legacy of spiritual enlightenment, the other constructed a monument to absolute monarchy that remains the standard for royal grandeur. These figures, though separated by centuries and continents, define our understanding of Absolute Power and its enduring impact on the human story.

Hover over the highlighted names to reveal history

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/image-hover-card.json

Visual Foundations

Backdrop Filter

Uses hardware-accelerated glassmorphism for maximum performance and depth.

backdrop-blur-xl

Radix Primitives

Built on top of @radix-ui/react-hover-card for accessible keyboard navigation and focus management.

@radix-ui/react-hover-card