<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.