【Next.js】ホバーカードの作り方を Tailwind の実例付きで紹介

import Image from "next/image";
  import Link from "next/link";

  type WorkCardProps = {
    href: string;
    title: string;
    summary: string;
    image: string;
  };

  export function WorkCard({ href, title, summary, image }: WorkCardProps) {
    return (
      <Link
        href={href}
        className="group block overflow-hidden rounded-2xl border border-zinc-200 bg-white transition-colors duration-200 ease-out hover:border-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2"
      >
        <div className="relative aspect-[4/3] overflow-hidden bg-zinc-100">
          <Image
            src={image}
            alt=""
            fill
            sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
            className="object-cover transition-transform duration-300 ease-out group-hover:scale-[1.04] group-focus-visible:scale-[1.04] motion-reduce:transition-none"
          />
        </div>
        <div className="p-5">
          <h3 className="font-semibold text-zinc-950">{title}</h3>
          <p className="mt-2 text-sm leading-relaxed text-zinc-600">{summary}</p>
        </div>
      </Link>
    );
  }

"use client";

  import { useRef, type PointerEvent, type ReactNode } from "react";

  export function SpotlightCard({ children }: { children: ReactNode }) {
    const ref = useRef<HTMLDivElement>(null);

    function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
      // タッチやペンでは光らせない
      if (event.pointerType !== "mouse" || !ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      ref.current.style.setProperty("--x", `${event.clientX - rect.left}px`);
      ref.current.style.setProperty("--y", `${event.clientY - rect.top}px`);
    }

    return (
      <div
        ref={ref}
        onPointerMove={handlePointerMove}
        className="group relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900 p-6 text-white"
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          style={{
            background:
              "radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.12), transparent 70%)",
          }}
        />
        <div className="relative">{children}</div>
      </div>
    );
  }

"use client";

  import { motion } from "motion/react";
  import type { ReactNode } from "react";

  export function LiftCard({ children }: { children: ReactNode }) {
    return (
      <motion.div
        whileHover={{ y: -4 }}
        whileTap={{ scale: 0.98 }}
        transition={{ type: "spring", stiffness: 300, damping: 24 }}
        className="rounded-2xl border border-zinc-200 bg-white p-6"
      >
        {children}
      </motion.div>
    );
  }