Card Hover Effect

1import { cn } from "@/lib/utils";
2import { AnimatePresence, motion } from "framer-motion";
3import { useState } from "react";
4
5export const HoverEffect = ({
6  items,
7  className,
8}: {
9  items: {
10    title: string;
11    description: string;
12    link: string;
13  }[];
14  className?: string;
15}) => {
16  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
17
18  return (
19    <div
20      className={cn(
21        "grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10",
22        className
23      )}
24    >
25      {items.map((item, idx) => (
26        <a
27          href={item?.link}
28          key={item?.link}
29          className="relative group  block p-2 h-full w-full"
30          onMouseEnter={() => setHoveredIndex(idx)}
31          onMouseLeave={() => setHoveredIndex(null)}
32        >
33          <AnimatePresence>
34            {hoveredIndex === idx && (
35              <motion.span
36                className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-slate-800/[0.8] block  rounded-3xl"
37                layoutId="hoverBackground"
38                initial={{ opacity: 0 }}
39                animate={{
40                  opacity: 1,
41                  transition: { duration: 0.15 },
42                }}
43                exit={{
44                  opacity: 0,
45                  transition: { duration: 0.15, delay: 0.2 },
46                }}
47              />
48            )}
49          </AnimatePresence>
50          <Card>
51            <CardTitle>{item.title}</CardTitle>
52            <CardDescription>{item.description}</CardDescription>
53          </Card>
54        </a>
55      ))}
56    </div>
57  );
58};
59
60export const Card = ({
61  className,
62  children,
63}: {
64  className?: string;
65  children: React.ReactNode;
66}) => {
67  return (
68    <div
69      className={cn(
70        "rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20 transition-all duration-300",
71        className
72      )}
73    >
74      <div className="relative z-50">
75        <div className="p-4">{children}</div>
76      </div>
77    </div>
78  );
79};
80export const CardTitle = ({
81  className,
82  children,
83}: {
84  className?: string;
85  children: React.ReactNode;
86}) => {
87  return (
88    <h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
89      {children}
90    </h4>
91  );
92};
93export const CardDescription = ({
94  className,
95  children,
96}: {
97  className?: string;
98  children: React.ReactNode;
99}) => {
100  return (
101    <p
102      className={cn(
103        "mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
104        className
105      )}
106    >
107      {children}
108    </p>
109  );
110};

1import { HoverEffect } from "@/components/ui/card-hover-effect";
2
3export default function CardHoverEffectDemo() {
4  return (
5    <div className="max-w-5xl mx-auto px-8">
6      <HoverEffect items={projects} />
7    </div>
8  );
9}
10export const projects = [
11  {
12    title: "Stripe",
13    description: "A technology company that builds economic infrastructure for the internet.",
14    link: "https://stripe.com",
15  },
16  {
17    title: "Netflix",
18    description: "A streaming service that offers a wide variety of award-winning shows.",
19    link: "https://netflix.com",
20  },
21  {
22    title: "Google",
23    description: "A multinational technology company specializing in Internet services.",
24    link: "https://google.com",
25  },
26  {
27    title: "Meta",
28    description: "A technology company focused on building products that advance social connection.",
29    link: "https://meta.com",
30  },
31  {
32    title: "Amazon",
33    description: "A multinational technology company focusing on e-commerce and cloud computing.",
34    link: "https://amazon.com",
35  },
36  {
37    title: "Microsoft",
38    description: "A multinational technology company that develops computer software and hardware.",
39    link: "https://microsoft.com",
40  },
41];