Zoom Rotate Effect

"use client";

export default function ImgfxZoomRotate() {
  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-neutral-50 to-neutral-100 px-6 py-24 dark:from-neutral-950 dark:to-neutral-900 sm:px-10">
      <style>{`
        .izr-frame img {
          transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
          will-change: transform;
        }
        .izr-frame:hover img,
        .izr-frame:focus-within img {
          transform: scale(1.12) rotate(-3deg);
        }
        .izr-cap {
          transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .izr-frame:hover .izr-cap,
        .izr-frame:focus-within .izr-cap {
          opacity: 1;
          transform: translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
          .izr-frame img,
          .izr-frame:hover img,
          .izr-frame:focus-within img {
            transition: none;
            transform: none;
          }
          .izr-cap { transition: none; }
        }
      `}</style>

      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <span className="mb-3 inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300">
          Image Effect
        </span>
        <h2 className="text-balance text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Zoom &amp; Tilt on Hover
        </h2>
        <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
          The photo scales up and rotates a few degrees for a tactile, playful reveal.
        </p>
      </div>

      <div className="mx-auto mt-12 flex max-w-md justify-center">
        <figure
          tabIndex={0}
          className="izr-frame group relative aspect-[4/5] w-full overflow-hidden rounded-3xl bg-neutral-200 shadow-xl ring-1 ring-black/5 outline-none transition-shadow duration-500 hover:shadow-2xl focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:ring-white/10"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Studio portrait that zooms and tilts when you hover over it"
            loading="lazy"
            draggable={false}
            className="h-full w-full object-cover"
          />

          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0" />

          <figcaption className="izr-cap pointer-events-none absolute inset-x-0 bottom-0 translate-y-3 p-6 text-left opacity-0">
            <p className="text-xs font-medium uppercase tracking-widest text-white/70">
              Hover to reveal
            </p>
            <p className="mt-1 text-lg font-semibold text-white">
              Motion adds depth
            </p>
          </figcaption>
        </figure>
      </div>

      <p className="mx-auto mt-8 max-w-md text-center text-xs text-neutral-500 dark:text-neutral-500">
        Hover or focus the image to see it zoom and rotate.
      </p>
    </section>
  );
}