To create a responsive image comparison slider, you must first build an HTML structure containing the front and back images and separator bars; 2. Use CSS to set relative units and object-fit to ensure layout adaptability; 3. Control the display range of the "before contrast" pictures through width or clip-path; 4. Add JavaScript to achieve sliding interaction between mouse and touch events; 5. Optimize styles for mobile devices and ensure touch support, and finally realize a responsive image comparison function that does not require a third-party library, is compatible with modern browsers, and fully supports desktop and mobile user interaction.

Creating a responsive image comparison slider with CSS is a great way to let users interactively compare two images—like before-and-after photos—on both desktop and mobile devices. You can build one using just HTML and CSS (with a little help from JavaScript for interaction), and make it fully responsive.

Here's how to do it step by step:

1. Basic HTML Structure

Start with a container that holds both images. The idea is to show one image fully and overlay the second image partially, with a draggable divider.

 <div class="image-comparison">
  <div class="image-comparison__slider" id="comparison-slider">
    <div class="image-comparison__before">
      <img src="/static/imghw/default1.png"  data-src="before.jpg"  class="lazy" alt="Before image">
    </div>
    <div class="image-comparison__after">
      <img src="/static/imghw/default1.png"  data-src="after.jpg"  class="lazy" alt="After image">
    </div>
    <div class="image-comparison__divider"></div>
  </div>
</div>

2. CSS for Layout and Responsiveness

Use relative units and object-fit to ensure the images scale properly across devices.

 .image-comparison {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.image-comparison__slider {
  position: relative;
  width: 100%;
  height: auto;
  cursor: col-resize;
}

.image-comparison__before,
.image-comparison__after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-comparison__before {
  overflow: hidden;
  z-index: 1;
}

.image-comparison__before img {
  width: 100%;
  height: auto;
  display: block;
}

.image-comparison__after img {
  width: 100%;
  height: auto;
  display: block;
}

.image-comparison__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  z-index: 2;
  transform: translateX(-50%);
}

.image-comparison__divider::after {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
}

3. Use CSS to Clip the "Before" Image Based on Slider Position

The key is to control how much of the "before" image is visible using clip-path or width . We'll use width for better browser support.

We'll update the .image-comparison__before width dynamically with JavaScript, but style it to be responsive:

 .image-comparison__before {
  overflow: hidden;
  z-index: 1;
  width: 50%; /* Default starting position */
}

4. Add JavaScript for Slider Interaction

Now add a bit of JavaScript to make the slider draggable.

 const slider = document.getElementById('comparison-slider');
let isDown = false;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  const sliderRect = slider.getBoundingClientRect();
  const percent = (e.clientX - sliderRect.left) / sliderRect.width;
  updateSlider(percent);
});

document.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  const sliderRect = slider.getBoundingClientRect();
  const percent = (e.clientX - sliderRect.left) / sliderRect.width;
  updateSlider(Math.max(0, Math.min(1, percent)));
});

document.addEventListener('mouseup', () => {
  isDown = false;
});

// Touch support for mobile
slider.addEventListener('touchstart', (e) => {
  isDown = true;
  const sliderRect = slider.getBoundingClientRect();
  const touch = e.touches[0];
  const percent = (touch.clientX - sliderRect.left) / sliderRect.width;
  updateSlider(Math.max(0, Math.min(1, percent)));
});

slider.addEventListener('touchmove', (e) => {
  if (!isDown) return;
  e.preventDefault();
  const sliderRect = slider.getBoundingClientRect();
  const touch = e.touches[0];
  const percent = (touch.clientX - sliderRect.left) / sliderRect.width;
  updateSlider(Math.max(0, Math.min(1, percent)));
});

slider.addEventListener('touchend', () => {
  isDown = false;
});

function updateSlider(percent) {
  const before = slider.querySelector('.image-comparison__before');
  before.style.width = `${percent * 100}%`;
  slider.querySelector('.image-comparison__divider').style.left = `calc(${percent * 100}% - 1px)`;
}

5. Make It Truly Responsive

To ensure it works on all screen sizes:

• Use relative units ( % , em , rem )
• Set max-width on the container
• Ensure images use max-width: 100% and height: auto
• Test on mobile: touch events are included above

You might also want to add a small reset for mobile zoom:

 @media (max-width: 768px) {
  .image-comparison__divider {
    width: 4px;
  }
  .image-comparison__divider::after {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

Optional: Use clip-path for Smoother Edge (Modern Browsers)

Instead of adjusting width, you can use clip-path for a cleaner cut:

 .image-comparison__before img {
  clip-path: inset(0 var(--clip) 0 0);
}

Then update --clip via JavaScript:

 before.style.setProperty('--clip', `${100 - percent * 100}%`);

This avoids layout shifts and gives a sharper edge.

Final Notes

• This solution is lightweight and doesn't require any libraries.
• Works on most modern browsers including mobile Safari.
• For accessibility, consider adding ARIA labels or keyboard support if needed.
• Always test touch behavior on real devices.

Basically, it's not complex once you break it down—layer two images, control visibility with width or clip-path, and let users drag to reveal.

The above is the detailed content of How to create a responsive image comparison slider with CSS?. For more information, please follow other related articles on the PHP Chinese website!