Hover Expand

A component that displays a set of image panels. It expands on hover or focus, showing titles and descriptions. Use it to showcase items in a compact, interactive layout.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/hover-expand

npx layro-cli add @educlopez/hover-expand

npx layro-cli add @educlopez/hover-expand

bunx layro-cli add @educlopez/hover-expand

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 { motion, useReducedMotion } from "motion/react";
import type { KeyboardEvent } from "react";
import { useEffect, useRef, useState } from "react";

export type HoverExpandOrientation = "horizontal" | "vertical";

export interface HoverExpandItem {
  alt?: string;
  description?: string;
  id: string;
  image?: string;