Hover Image List

Navigation 17

About

A list of links or rows that reveals a preview image next to the cursor when a user hovers or focuses each row, with a spring-animated follow and skew effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hover Image List to your project and fits it to your theme.

Code

How Hover Image List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HoverImageList from "@/components/ui/hover-image-list";

const items = [
  {
    id: "1",
    title: "Editorial Design",
    meta: "Branding, 2024",
    href: "#",
    image: "https://cdn.21st.dev/assets/mirror/f5/f5ed6d909e86351da7a77e3d5fde6f9f57c214e42b462176280811fe72d71ffa.jpg",
    alt: "Editorial Design project cover",
  },
  {
    id: "2",
    title: "Studio Website",
    meta: "Web Design, 2023",
    href: "#",
    image: "https://cdn.21st.dev/assets/mirror/db/db58149e56cf0d7b0093e0be3317deb76d00f9a8e152a77929239113f8ce2ec0.jpg",
    alt: "Studio Website project cover",
  },
  {
    id: "3",
    title: "Product Packaging",
    meta: "Art Direction, 2023",
    href: "#",
    image: "https://cdn.21st.dev/assets/mirror/40/40c15df14857d60fae860437684f62d71862700d359f6359528038f7e834d727.jpg",
    alt: "Product Packaging project cover",
  },
  {
    id: "4",
    title: "Motion Reel",
    meta: "Animation, 2022",
    href: "#",
    image: "https://cdn.21st.dev/assets/mirror/be/be1c6a4504656baacdd9c1222081f6e61c0385cbb547bede78208dfc6bc1b221.jpg",
    alt: "Motion Reel project cover",
  },
];

export default function HoverImageListDemo() {
  return (
    <div className="mx-auto w-full max-w-xl px-6">
      <HoverImageList items={items} />
    </div>
  );
}