Comparison sliders

Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

Before

After

<div class="comparison-slider">
  <figure class="comparison-before">
    <!-- image (before) -->
    <div class="comparison-label">Before</div>
  </figure>

  <figure class="comparison-after">
    <!-- image (after) -->
    <div class="comparison-label">After</div>
    <textarea class="comparison-resizer" readonly></textarea>
  </figure>
</div>