<div class="image-compare">
  <img class="image-1" src="https://assets.codepen.io/592829/example-image.svg" alt="A friendly illustrated cloud character with eyes on a red-pink background.">
  <img class="image-2" src="https://assets.codepen.io/592829/example-image2.svg" alt="A friendly illustrated cloud character with eyes surrounded by a variety of icons (including check marks, stars, code brackets, buttons, hearts, a checkbox, and many more) on a blue background.">
</div>

html, body {
  margin: 0;
  padding: 0;
}

.image-compare {
  position: relative;
}

.image-2 {
  --exposure: 50%;
  
  display: block;
  position: absolute;
  top: 0;
  clip-path: polygon(
    var(--exposure) 0, 
    100% 0, 
    100% 100%, 
    var(--exposure) 100%
  );
}