Image Comparer Vertical

Fetch pattern JSON: curl https://webspire.de/patterns/image-comparer/vertical.json

vertical.html

<div class="ws-image-comparer relative aspect-[16/9] w-full max-w-2xl overflow-hidden rounded-lg border border-[var(--ws-image-comparer-border)] bg-[var(--ws-image-comparer-bg)]">
  <!-- After image (background layer) -->
  <div class="absolute inset-0 bg-gradient-to-br from-violet-400 to-indigo-600"></div>

  <!-- Before image (clipped layer, top half) -->
  <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-orange-500" style="clip-path: inset(0 0 50% 0)"></div>

  <!-- Labels -->
  <span class="absolute left-3 top-3 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">Before</span>
  <span class="absolute bottom-3 right-3 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">After</span>

  <!-- Divider line (horizontal) -->
  <div class="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 bg-white/80"></div>

  <!-- Drag handle -->
  <div class="absolute left-1/2 top-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-white bg-white/90 shadow-lg" aria-label="Drag to compare">
    <svg class="h-5 w-5 text-[var(--ws-image-comparer-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M7 8l5-4 5 4M7 16l5 4 5-4" />
    </svg>
  </div>
</div>

Details

Family

image-comparer

Tier

enhanced

Kind

component

Extends

image-comparer/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

imagecompareverticalbeforeaftertopbottomsplit

Slots

Name	Required	Description
before	Yes	Before image (top half).
after	Yes	After image (bottom half).
labels	No	Before/After label badges.

Vertical variant of the image comparer with a horizontal divider line. The “before” layer clips to the top half using clip-path: inset(0 0 50% 0). The drag handle shows up/down arrows instead of left/right. Labels appear top-left (“Before”) and bottom-right (“After”).