Tween UITween UI
7

Blocks

Card Hover Expand

A card row where hovering one widens it, fades the photo in, and drops the copy down.

A ready-made card block. Cards sit in a row; the hovered card grows wider, its photo fades in, and the title drops to the bottom over a gradient. On smaller screens every card stays expanded. Pure CSS.

New tab
Team reviewing hover interactions on a whiteboard

Motion first

Hover systems that feel native

.01

Developer working with component source in an editor

Copy and own

Drop in the source, keep the motion

.02

Team shipping a product together

Ship ready

Reduced-motion built in from the start

.03

Installation

pnpm dlx shadcn@latest add @tween-ui/card-hover-expand

Usage

app/page.tsx
app/page.tsx
import CardHoverExpand from '@/components/tweenui/card/card-hover-expand';
 
export default function Page() {
  return <CardHoverExpand />;
}

Pass your own cards to make it yours:

app/page.tsx
app/page.tsx
import CardHoverExpand from '@/components/tweenui/card/card-hover-expand';
 
export default function Page() {
  return (
    <CardHoverExpand
      cards={[
        {
          step: '.01',
          label: 'Motion first',
          title: 'Hover systems that feel native',
          image: '/photos/motion.jpg',
          imageAlt: 'Hover interaction review',
        },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
cardsCardHoverExpandItem[]3-card sampleCards in the row.

Each card is { step, label, title, image, imageAlt }. Extends native <div> attributes (className, style, …).

Accessibility

Each card is keyboard-focusable. Focus (and hover) expands that card. Under prefers-reduced-motion: reduce the width, photo fade, and title drop do not animate — they still swap to the active state.