Glow Edge Effect

Original · free

A coloured glow blooms around the image edges on hover.

byWeb InnoventixReact + Tailwind

glowedgeimageeffect

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-glow-edge.json

Open

imgfx-glow-edge.tsx

"use client";

export default function ImgfxGlowEdge() {
  return (
    <section className="relative w-full bg-white px-6 py-20 dark:bg-neutral-950 sm:py-28">
      <style>{`
        .glowedge-card {
          transform: translateZ(0);
          transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .glowedge-card::before {
          content: "";
          position: absolute;
          inset: -2px;
          z-index: -1;
          border-radius: inherit;
          background: conic-gradient(
            from 180deg,
            #6366f1,
            #a855f7,
            #ec4899,
            #10b981,
            #6366f1
          );
          opacity: 0;
          filter: blur(22px);
          transform: scale(0.94);
          transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .glowedge-card:hover,
        .glowedge-card:focus-visible {
          transform: translateY(-4px) translateZ(0);
        }
        .glowedge-card:hover::before,
        .glowedge-card:focus-visible::before {
          opacity: 0.9;
          transform: scale(1.02);
          animation: glowedge-drift 6s linear infinite;
        }
        .glowedge-card:hover .glowedge-ring,
        .glowedge-card:focus-visible .glowedge-ring {
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.28) inset,
            0 0 34px -6px rgba(168, 85, 247, 0.55),
            0 0 64px -10px rgba(99, 102, 241, 0.45);
        }
        @keyframes glowedge-drift {
          to {
            filter: blur(22px) hue-rotate(360deg);
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .glowedge-card,
          .glowedge-card::before {
            transition: opacity 200ms ease;
          }
          .glowedge-card:hover,
          .glowedge-card:focus-visible {
            transform: translateZ(0);
          }
          .glowedge-card:hover::before,
          .glowedge-card:focus-visible::before {
            animation: none;
            transform: scale(1.01);
          }
        }
      `}</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">
          Glow Edge
        </h2>
        <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
          A coloured light blooms around the frame on hover.
        </p>

        <div className="mt-12">
          <button
            type="button"
            aria-label="Coastal cliffs at golden hour — hover to bloom the edge glow"
            className="glowedge-card group relative block cursor-default rounded-2xl bg-neutral-100 outline-none dark:bg-neutral-900"
          >
            <span className="glowedge-ring relative block overflow-hidden rounded-2xl shadow-[0_0_0_1px_rgba(0,0,0,0.06)] transition-shadow duration-500 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g07.webp"
                alt="Sunlit coastal cliffs meeting a calm sea at golden hour"
                loading="lazy"
                draggable={false}
                className="h-auto w-[19rem] select-none object-cover sm:w-[26rem]"
              />
            </span>
          </button>
        </div>

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