Use hidden check boxes and tags to achieve interaction; 2. Control clip-path and tag location through the CSS's checked state; 3. Use clip-path attribute to switch the display area of the front and back images; 4. Add transition animation and accessibility optimization to improve the user experience. The answer is: the CSS-only image comparison and switching can be achieved by combining label label with clip-path by hiding the checkbox. When clicking the tag, the checked state changes, triggering the before image to change from 50% crop to full display. At the same time, the slider moves to the right to form a smooth switching effect. This method is lightweight and compatible with modern browsers, but only supports click switching rather than dragging. If you need to drag continuously, JavaScript needs to be supported.

Creating a CSS-only image comparison slider is a great way to showcase before-and-after images without relying on JavaScript. This can be achieved using HTML and clever CSS techniques involving labels, checkboxes, and the :checked pseudo-class to control visibility and positioning.

Here's how you can build a functional, responsive, and smooth image comparison slider using only CSS.

1. HTML Structure

We'll use a label and a hidden checkbox to toggle the slider position. The two images (before and after) are layered, and the "before" image is clipped based on the slider position.

 <div class="comparison-slider">
  <input type="checkbox" id="slider-toggle" class="slider-checkbox">
  <label for="slider-toggle" class="slider-label"></label>

  <!-- After image (background) -->
  <img class="image after lazy"  src="/static/imghw/default1.png"  data-src="after.jpg"  alt="After Image">

  <!-- Before image (foreground, clipped) -->
  <div class="image before" style="background-image: url(&#39;before.jpg&#39;);"></div>
</div>

Note : We use a <div> with a background image for the "before" layer so we can easily clip it with clip-path or overflow . Using an <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175434336658870.jpeg" class="lazy" alt="How to create a CSS-only image comparison slider?" > tag inside a clipped container may not work consistently.

2. Core CSS Styling

Now, style the container and implement the slider effect.

 .comparison-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3; /* Optional: maintain aspect ratio */
}

.comparison-slider .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-slider .before {
  background-size: cover;
  background-position: center;
  clip-path: inset(0 50% 0 0); /* Start with 50% hidden */
  transition: clip-path 0.3s ease;
}

/* Hidden checkbox */
.slider-checkbox {
  display: none;
}

/* Label acts as the draggable slider handle */
.slider-label {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 45%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0.6) 55%,
    transparent 55%
  );
  border-left: 2px solid #ffff;
  border-right: 2px solid #fff;
  box-sizing: border-box;
}

/* When checkbox is checked, move the clip */
.slider-checkbox:checked ~ .before {
  clip-path: inset(0 0 0 0); /* Show full before image */
}

.slider-checkbox:checked ~ .slider-label {
  left: 100%;
}

3. How It Works

• The checkbox is hidden ( display: none ), but its :checked state controls the layout.
• The label is styled as a vertical handle that the user clicks or drags.
• By default, the "before" image is clipped to show only the right half ( clip-path: inset(0 50% 0 0) ).
• When the label is clicked, the checkbox toggles, and the :checked state expands the clip to show the full "before" image.
• The handle ( label ) also moves from the center to the far right using left: 100% .

This gives a toggle effect: click once to reveal "before", click again to go back.

4. Optional: Add Smooth Drag-Like Effect (Limited Without JS)

True drag-to-slide requires JavaScript. But you can simulate a two-state slider (half/half or full before) with just CSS.

If you want continuous control , you'd need JavaScript. But for a simple toggle , this CSS-only version works perfectly.

5. Accessibility & UX Tips

• Add aria-label to the checkbox:

   <input type="checkbox" id="slider-toggle" class="slider-checkbox" aria-label="Toggle before and after view">

• Use high-contrast colors for the slider handle.
• Ensure images are optimized for fast loading.

---

Summary

You can create a functional image comparison slider with:

• A hidden checkbox to store state
• A label as the interactive handle
• clip-path to reveal/hide the "before" image
• CSS transitions for smooth animation

This method is lightweight, accessible, and works across modern browsers (with clip-path support — avoid in very old browsers).

Limitation : It's a toggle, not a draggable slider. For true drag interaction, JavaScript is needed.

But for a clean, fast, CSS-only solution — this approach is effective and elegant.

Basically, just style the label to act as a switch and use clip-path with checkbox state to control visibility. That's it.

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