Image Comparison

README.md

Image Comparison

view on jsgist

index.css

.comparison-slider {
  position: relative;
  width: 100%; /* Fully responsive */
}

.comparison-slider img {
  width: 100%;
  display: block; /* Removes bottom gap */
}

.image-overlay {
  position: absolute;
  inset: 0 auto 0 0; /* top, right, bottom, left shorthand */
  width: 50%;
  overflow: hidden;
}

/* THE FIX: Prevents top image from shrinking or sliding */
.image-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left; 
}

.slider {
  position: absolute;
  inset: 0;
  width: 100%;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

index.html

<div class="comparison-slider">
  <img src="https://webgpufundamentals.org/webgpu/resources/images/lut/bgy-s8.png" alt="After image" class="image-after">
  <div class="image-overlay">
    <img src="https://webgpufundamentals.org/webgpu/resources/images/lut/black-white-s8n.png" alt="Before image">
  </div>
  <input type="range" min="0" max="100" value="50" class="slider">
</div>

index.js

const slider = document.querySelector('.slider');
const overlay = document.querySelector('.image-overlay');

slider.addEventListener('input', (e) => {
  const sliderValue = e.target.value;
  overlay.style.width = `${sliderValue}%`;
});

jsGist.json

{"name":"Image Comparison","settings":{},"filenames":["index.html","index.css","index.js"]}