Blend Multiply Effect

"use client";

export default function ImgfxBlendMultiply() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        @keyframes imgfxbm-rise {
          from { opacity: 0; transform: translateY(14px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .imgfxbm-rise {
          animation: imgfxbm-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfxbm-rise { animation: none; }
          .imgfxbm-card,
          .imgfxbm-tint,
          .imgfxbm-img,
          .imgfxbm-label { transition: none !important; }
        }
      `}</style>

      <div className="relative mx-auto max-w-2xl">
        <header className="imgfxbm-rise mb-8 text-center">
          <span className="inline-block rounded-full border border-rose-300/70 bg-rose-100/60 px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-rose-700 dark:border-rose-400/30 dark:bg-rose-500/10 dark:text-rose-300">
            Multiply Blend
          </span>
          <h2 className="mt-4 text-2xl font-semibold tracking-tight text-neutral-900 sm:text-3xl dark:text-neutral-50">
            Colour-washed on rest, true on hover
          </h2>
          <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
            A multiply-blended block tints the photo. Hover to dissolve the wash and reveal the original.
          </p>
        </header>

        <figure className="imgfxbm-rise group relative mx-auto aspect-[4/5] w-full max-w-md overflow-hidden rounded-2xl shadow-xl ring-1 ring-black/5 dark:ring-white/10">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Portrait photograph shown beneath a coloured multiply-blend wash that clears on hover"
            loading="lazy"
            draggable={false}
            className="imgfxbm-img h-full w-full object-cover saturate-[1.15] transition-[filter,transform] duration-700 ease-out group-hover:scale-[1.03] group-hover:saturate-100"
          />

          <div
            aria-hidden="true"
            className="imgfxbm-tint pointer-events-none absolute inset-0 bg-gradient-to-br from-rose-500 via-fuchsia-500 to-indigo-600 opacity-90 mix-blend-multiply transition-opacity duration-700 ease-out group-hover:opacity-0 dark:from-rose-400 dark:via-fuchsia-500 dark:to-indigo-500"
          />

          <figcaption className="imgfxbm-label pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-between px-4 pb-4 pt-10 text-xs font-medium tracking-wide text-white transition-opacity duration-500">
            <span className="rounded-md bg-black/30 px-2 py-1 backdrop-blur-sm">
              g14 · rose → indigo
            </span>
            <span className="rounded-md bg-black/30 px-2 py-1 opacity-90 backdrop-blur-sm transition group-hover:opacity-0">
              hover to clear
            </span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}