Hover Image List

A list of image items that show a preview on hover or focus. It moves the preview based on pointer position or focuses on an item. Use it to display images with interactive details in a grid layout.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/hover-image-list

npx layro-cli add @educlopez/hover-image-list

npx layro-cli add @educlopez/hover-image-list

bunx layro-cli add @educlopez/hover-image-list

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { ArrowUpRight } from "lucide-react";
import {
  AnimatePresence,
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "motion/react";
import type { FocusEvent, PointerEvent, ReactNode } from "react";
import { useCallback, useEffect, useRef, useState } from "react";