<body>
  <div class="container js-comparator">
    <div class="bg bg--2-left" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/ws06-gray_main.jpg);"></div>
    <div class="bg bg--2-right" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/ws06-purple_main.jpg);"></div>
  </div>
  <div class="container js-comparator">
    <div class="bg bg--3-left" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/ws06-gray_main.jpg);"></div>
    <div class="bg bg--3-top" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/ws06-purple_main.jpg);"></div>
    <div class="bg bg--3-right" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/ws06-red_main.jpg);"></div>
  </div>
  <div class="container js-comparator">
    <div class="bg bg--small bg--4-tri-top" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes.svg);"></div>
    <div class="bg bg--small bg--4-tri-right" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-tomato.svg);"></div>
    <div class="bg bg--small bg--4-tri-bottom" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-purple.svg);"></div>
    <div class="bg bg--small bg--4-tri-left" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-orange.svg);"></div>
  </div>
  <div class="container js-comparator">
    <div class="bg bg--small bg--4-rec-top-left" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-orange.svg);"></div>
    <div class="bg bg--small bg--4-rec-top-right" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-tomato.svg);"></div>
    <div class="bg bg--small bg--4-rec-bottom-left" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes-purple.svg);"></div>
    <div class="bg bg--small bg--4-rec-bottom-right" style="background-image: url(https://ivanalbizu.eu/experimentos/clip-path-images-compare/img/clothes.svg);"></div>
  </div>
</body>
body {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  background-color: #f1f1f1;
}
.container {
  width: 480px;
  max-width: 96%;
  margin: 10px auto 40px;
  filter: drop-shadow(0px 0px 3px #ccc);
  cursor: pointer;
  display: grid;
  grid-template-areas: "img";
  &.active {
    cursor: move;
  }
}
.js-comparator {
  &--2 {
    --x: 50%;
  }
  &--3 {
    --x: 50%;
    --y: 50%;
  }
  &--4 {
    --x: 50%;
    --y: 50%;
  }
}
.bg {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: inherit;
  max-width: inherit;
  grid-area: img;
  padding-top: 110%;
  margin: auto;
  &--small {
    padding-top: 90%;
  }

  &--2-left {
    clip-path: polygon(0 0, var(--x) 0, var(--x) 100%, 0 100%);
  }
  &--2-right {
    clip-path: polygon(var(--x) 0, 100% 0, 100% 100%, var(--x) 100%);
  }
  &--3-top {
    clip-path: polygon(0 0, 100% 0, 100% var(--y), 0 var(--y));
  }
  &--3-left {
    clip-path: polygon(0 var(--y), var(--x) var(--y), var(--x) 100%, 0 100%);
  }
  &--3-right {
    clip-path: polygon(100% var(--y), var(--x) var(--y), var(--x) 100%, 100% 100%);
  }
  &--4-tri-top {
    clip-path: polygon(var(--x) var(--y), 100% 0, 0 0);
  }
  &--4-tri-right {
    clip-path: polygon(var(--x) var(--y), 100% 100%, 100% 0);
  }
  &--4-tri-bottom {
    clip-path: polygon(var(--x) var(--y), 0% 100%, 100% 100%);
  }
  &--4-tri-left {
    clip-path: polygon(var(--x) var(--y), 0 0, 0 100%);
  }
  &--4-rec-top-left {
    clip-path: polygon(0 0, var(--x) 0, var(--x) var(--y), 0 var(--y));
  }
  &--4-rec-top-right {
    clip-path: polygon(100% 0, var(--x) 0, var(--x) var(--y), 100% var(--y));
  }
  &--4-rec-bottom-left {
    clip-path: polygon(var(--x) var(--y), 0 var(--y), 0 100%, var(--x) 100%);
  }
  &--4-rec-bottom-right {
    clip-path: polygon(var(--x) var(--y), 100% var(--y), 100% 100%, var(--x) 100%);
  }
}
View Compiled
document.addEventListener('DOMContentLoaded', () => {

  const boxes = document.querySelectorAll('.js-comparator');
  boxes.forEach(box => box.addEventListener('click', handleComparator, false) );

});

const handleComparator = () => {
  const container = event.target.closest('.js-comparator');
  if (!container.classList.contains('active')) {
    container.classList.add('active')
    container.addEventListener('mousemove', coord, false);
  } else {
    container.classList.remove('active')
    container.removeEventListener('mousemove', coord, false);
  }
}

const coord = () => {
  const viewportX = event.clientX;
  const viewportY = event.clientY;

  const boxRectangle = event.target.getBoundingClientRect();
  const localX = viewportX - boxRectangle.left;
  const localY = viewportY - boxRectangle.top;

  const container = event.target.closest('.js-comparator');
  container.style.setProperty('--x', `${localX}px`);
  container.style.setProperty('--y', `${localY}px`);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.