GitHub

Hover image

I grabbed a ☕ coffee, explored the sights 🏙️, and took plenty of around London 🇬🇧 before catching my ✈️ flight home tonight.

Installation

1. Install dependencies

npm install motion

npx shadcn@latest add hover-card

2. Install hover image

npx shadcn-animated add hover-image

Usage

1
import {
2
  Button,
3
  HoverCard,
4
  HoverCardTrigger,
5
  HoverImage,
6
} from "@/components/ui/hover-image";
1
<div className="p-20 text-center">
2
      <HoverCard>
3
        <span className="text-3xl font-medium text-secondary-foreground">
4
          I grabbed a ☕ coffee, explored the sights 🏙️, and took plenty of{" "}
5
        </span>
6
        <HoverCardTrigger
7
          delay={10}
8
          closeDelay={100}
9
          render={
10
            <Button variant="link">
11
              <span className="text-3xl font-medium">📸 photos</span>
12
            </Button>
13
          }
14
        />
15
        <span className="text-3xl font-medium text-secondary-foreground">
16
          {" "}
17
          around London 🇬🇧 before catching my ✈️ flight home tonight.
18
        </span>
19


20
        <HoverImage>
21
          <img
22
            src="https://images.unsplash.com/photo-1569865867048-34cfce8d58fe?w=900"
23
            alt="London"
24
            className="h-40 w-full rounded object-cover"
25
          />
26


27
          <img
28
            src="https://images.unsplash.com/photo-1454793147212-9e7e57e89a4f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGxvbmRvbnxlbnwwfHwwfHx8MA%3D%3D"
29
            alt="London"
30
            className="max-h-40 w-full rounded object-cover"
31
          />
32
          <img
33
            src="https://images.unsplash.com/photo-1534011640498-530cfd0e854a?q=80&w=987"
34
            alt="London trip"
35
            className="max-h-40 w-full rounded object-cover"
36
          />
37
        </HoverImage>
38
      </HoverCard>
39
    </div>

Next