<div class="image-slider">
   <div><img src="https://placehold.co/600x400" alt="Before" /></div>
  
   <img src="https://placehold.co/601x401/000000/FFFFFF.png" />
</div>  

<style>

.image-slider {
     position:relative;
     display: inline-block;
}

.image-slider > div {
     position: absolute;
     top: 0; bottom: 0; left: 0;
     width: 50%;
     max-width: 100%;
     overflow: hidden;
     resize: horizontal;
}

.image-slider > div:before {
     content: ' ';
     position: absolute;
     right: 0; bottom: 0;
     width: 18px; height: 18px;
     padding: 5px;
     background: linear-gradient(-45deg, white 50%, transparent 0);
     background-clip: content-box;
     cursor: ew-resize;
     -webkit-filter: drop-shadow(0 0 2px black);
     filter: drop-shadow(0 0 2px black);
}

.image-slider img {
     display: block;
     user-select: none;
}
</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.