Cards Demo 1

1"use client";
2import { cn } from "@/lib/utils";
3 
4export default function CardDemo() {
5  return (
6    <div className="max-w-xs w-full">
7      <div
8        className={cn(
9          "group w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto flex flex-col justify-end p-4 border border-transparent dark:border-neutral-800",
10          "bg-[url(https://images.unsplash.com/photo-1476842634003-7dcca8f832de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80)] bg-cover",
11          // Preload hover image by setting it in a pseudo-element
12          "before:bg-[url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWlodTF3MjJ3NnJiY3Rlc2J0ZmE0c28yeWoxc3gxY2VtZzA5ejF1NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/syEfLvksYQnmM/giphy.gif)] before:fixed before:inset-0 before:opacity-0 before:z-[-1]",
13          "hover:bg-[url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWlodTF3MjJ3NnJiY3Rlc2J0ZmE0c28yeWoxc3gxY2VtZzA5ejF1NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/syEfLvksYQnmM/giphy.gif)]",
14          "hover:after:content-[''] hover:after:absolute hover:after:inset-0 hover:after:bg-black hover:after:opacity-50",
15          "transition-all duration-500"
16        )}
17      >
18        <div className="text relative z-50">
19          <h1 className="font-bold text-xl md:text-3xl text-gray-50 relative">
20            Background Overlays
21          </h1>
22          <p className="font-normal text-base text-gray-50 relative my-4">
23            This card is for some special elements, like displaying background
24            gifs on hover only.
25          </p>
26        </div>
27      </div>
28    </div>
29  );
30}