Double Border Effect

Original · free

A double offset border animates in on hover.

byWeb InnoventixReact + Tailwind

doubleborderimageeffect

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-double-border.json

Open

imgfx-double-border.tsx

"use client";

export default function ImgfxDoubleBorder() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        @keyframes idb-hint-pulse {
          0%, 100% { transform: translateX(0); opacity: 0.6; }
          50% { transform: translateX(3px); opacity: 1; }
        }
        .idb-frame,
        .idb-border {
          transition:
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 420ms ease;
          will-change: transform, opacity;
        }
        .idb-hint-dot {
          animation: idb-hint-pulse 2.4s ease-in-out infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          .idb-frame,
          .idb-border {
            transition: none !important;
          }
          .idb-hint-dot {
            animation: none !important;
          }
        }
      `}</style>

      <div className="mx-auto flex max-w-5xl flex-col items-center">
        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-center text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
          Double Offset Border
        </h2>
        <p className="mt-3 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
          <span className="idb-hint-dot inline-block h-1.5 w-1.5 rounded-full bg-rose-500" />
          Hover the photo — twin frames slide out to opposite corners
        </p>

        <div className="group relative mt-14 mb-6 mr-6">
          {/* Rear offset border — settles to the bottom-right on hover */}
          <span
            aria-hidden="true"
            className="idb-border pointer-events-none absolute inset-0 rounded-2xl border-2 border-rose-400/70 opacity-0 group-hover:translate-x-5 group-hover:translate-y-5 group-hover:opacity-100 dark:border-rose-400/60"
          />
          {/* Front offset border — settles to the top-left on hover */}
          <span
            aria-hidden="true"
            className="idb-border pointer-events-none absolute inset-0 z-20 rounded-2xl border-2 border-indigo-500/80 opacity-0 group-hover:-translate-x-3 group-hover:-translate-y-3 group-hover:opacity-100 dark:border-indigo-400/80"
          />

          {/* Photo */}
          <figure className="idb-frame relative z-10 overflow-hidden rounded-2xl bg-neutral-200 shadow-lg shadow-neutral-900/10 ring-1 ring-neutral-900/5 group-hover:shadow-xl dark:bg-neutral-800 dark:shadow-black/40 dark:ring-white/10">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="Sunlit modern interior with layered architectural lines"
              loading="lazy"
              draggable={false}
              className="block h-auto w-full max-w-md select-none object-cover sm:max-w-lg"
            />
          </figure>
        </div>

        <p className="mt-8 max-w-md text-center text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
          Two thin frames rest flush against the image, then split toward
          opposite corners on hover for a quiet, gallery-style flourish.
        </p>
      </div>
    </section>
  );
}