Glare Diagonal Effect

Original · free

A soft diagonal glare passes over the image on hover.

byWeb InnoventixReact + Tailwind

glarediagonalimageeffect

Open

Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.

npx shadcn@latest add https://webinnoventix.com/r/imgfx-glare-diagonal.json

Open

imgfx-glare-diagonal.tsx

"use client";

export default function ImgfxGlareDiagonal() {
  return (
    <section className="relative w-full bg-white px-6 py-20 dark:bg-neutral-950 sm:py-28">
      <style>{`
        .glarefx-sheen {
          background: linear-gradient(
            105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.15) 44%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.15) 56%,
            transparent 70%
          );
          transform: translateX(-120%);
          transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
          will-change: transform;
        }
        .glarefx-card:hover .glarefx-sheen,
        .glarefx-card:focus-visible .glarefx-sheen {
          transform: translateX(120%);
        }
        @media (prefers-reduced-motion: reduce) {
          .glarefx-sheen {
            transition: none;
            transform: translateX(-120%);
          }
          .glarefx-card:hover .glarefx-sheen,
          .glarefx-card:focus-visible .glarefx-sheen {
            transform: translateX(-120%);
          }
        }
      `}</style>

      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Diagonal Glare
        </h2>
        <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
          A soft band of light sweeps across the frame. Hover the photo to catch the shine.
        </p>

        <div
          tabIndex={0}
          className="glarefx-card group relative mt-10 aspect-[4/3] w-full max-w-xl cursor-pointer overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-100 shadow-lg shadow-neutral-900/5 outline-none ring-offset-2 ring-offset-white transition-shadow duration-500 hover:shadow-2xl hover:shadow-neutral-900/15 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-black/30 dark:ring-offset-neutral-950"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Mountain ridge glowing under low evening light"
            loading="lazy"
            draggable={false}
            className="h-full w-full select-none object-cover transition-transform duration-[1200ms] ease-out group-hover:scale-[1.04]"
          />

          <div
            aria-hidden="true"
            className="glarefx-sheen pointer-events-none absolute inset-0 z-10 mix-blend-screen"
          />

          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-tr from-neutral-950/30 via-transparent to-transparent"
          />
        </div>

        <p className="mt-5 text-xs font-medium uppercase tracking-wider text-neutral-400 dark:text-neutral-500">
          Hover to reveal
        </p>
      </div>
    </section>
  );
}