Before

After

 

 

Before

After

Before

After

<!-- HTML -->
<div class="slider-container">
  <div class="before-image">
    <img src="https://cdn.pixabay.com/photo/2016/03/21/10/44/desert-1270345_1280.jpg" alt="Before Image">
    <div class="before-text">Before</div>
  </div>
  <div class="after-image">
    <img src="https://cdn.pixabay.com/photo/2021/05/22/01/47/mountains-6272362_1280.jpg" alt="After Image">
    <div class="after-text">After</div>
  </div>
  <div class="slider-handle" id="sliderHandle"></div>
  <div class="slider-line">
    <div class="pulse-container">
      <svg role="presentation" focusable="false" fill="none" width="50" height="50" viewBox="0 0 50 50">
        <g>
          <rect width="50" height="50" rx="25" fill="#ffffff"></rect>
          <path d="m19.25 19-6 6 6 6m11.5 0 6-6-6-6" stroke="#000000" stroke-width=".75" stroke-linecap="square"></path>
        </g>
      </svg>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
.slider-container {
  margin: 2rem auto;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  overflow: hidden;
}
.before-image,
.after-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.before-image img,
.after-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-text,
.after-text {
  position: absolute;
  font-family: system-ui;
  font-size: 14px;
  font-weight: 600;
  color: #3a3a3a;
  z-index: 4;
  padding: 10px 20px;
  background-color: #ffffff9e;
  border-radius: 0.3rem;
  letter-spacing: 2px;
}
.before-text {
  left: 20px; top: 20px; z-index: 5;
}
.after-text {
  right: 20px; top: 20px; z-index: 3;
}
.after-image {
  clip-path: inset(0 50% 0 0);
}
.slider-handle {
  position: absolute; top: 0;
  left: 50%;
  width: 0px; height: 100%;
  background-color: #fff;
  cursor: pointer;
  z-index: 2;
}
.slider-line {
  position: absolute; top: 0;
  left: 50%;
  width: 0px; height: 100%;
  display: flex; justify-content: center; align-items: center;
  background-color: transparent;
  z-index: 1;
}
.pulse-container {
  position: relative; display: inline-block;
}
.pulse-container::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px; border-radius: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0; animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.slider-line svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; cursor: pointer;
}
</style>

<!-- JavaScript -->
<script>
(function(){
  const container = document.querySelector(".slider-container");
  if (!container) return;
  const handle = container.querySelector("#sliderHandle");
  const line = container.querySelector(".slider-line");
  const before = container.querySelector(".before-image");
  const after = container.querySelector(".after-image");

  let dragging = false;

  const init = () => {
    handle.style.transition = "left 0.3s ease";
    line.style.transition = "left 0.3s ease";
    handle.style.left = "50%";
    line.style.left = "50%";
    before.style.clipPath = `inset(0 50% 0 0)`;
    after.style.clipPath = `inset(0 0 0 50%)`;
  };

  const move = clientX => {
    const rect = container.getBoundingClientRect();
    let x = clientX - rect.left;
    if (x < 0) x = 0; if (x > rect.width) x = rect.width;
    const pct = (x / rect.width) * 100;
    handle.style.left = `${pct}%`;
    line.style.left = `${pct}%`;
    before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;
    after.style.clipPath = `inset(0 0 0 ${pct}%)`;
  };

  handle.addEventListener("mousedown", () => { dragging = true; handle.style.transition = "none"; line.style.transition = "none"; });
  line.addEventListener("mousedown", () => { dragging = true; handle.style.transition = "none"; line.style.transition = "none"; });
  window.addEventListener("mouseup", () => { dragging = false; handle.style.transition = "left 0.3s ease"; line.style.transition = "left 0.3s ease"; });
  window.addEventListener("mousemove", e => { if (dragging) move(e.clientX); });

  handle.addEventListener("touchstart", () => { dragging = true; handle.style.transition = "none"; line.style.transition = "none"; });
  line.addEventListener("touchstart", () => { dragging = true; handle.style.transition = "none"; line.style.transition = "none"; });
  window.addEventListener("touchend", () => { dragging = false; handle.style.transition = "left 0.3s ease"; line.style.transition = "left 0.3s ease"; });
  window.addEventListener("touchmove", e => { if (dragging) move(e.touches[0].clientX); });

  document.addEventListener("DOMContentLoaded", init);
})();
</script>

Before

After