<div class="image-comp">
  <div>
    <img src="https://cdn3.photostockeditor.com/c/0904/hills-and-grassy-field-landscape-image-freephoto-image.jpg" />
  </div>
    <img src="https://wdrfree.com/hills-and-grassy-field-landscape-image-freephoto-image2.jpg" />
</div>
<br>
<br style="clear:both">
<a href="https://photostockeditor.com/image/hills-and-grassy-field-landscape-image-freephoto-107889">Image Source</a>
.image-comp {
	position:relative;
	display: inline-block;
	line-height: 0;
}
.image-comp img {
	user-select: none;
	max-width: 600px;
}
.image-comp > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 25px;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}
.image-comp > div:before {
	content: '';
	display: block;
	width: 13px; 
	height: 13px;
	overflow: hidden;
	position: absolute;
	resize: horizontal;
	right: 3px; bottom: 3px;
	background-clip: content-box;
	background: linear-gradient(-45deg, black 50%, transparent 0);
	-webkit-filter: drop-shadow(0 0 2px black);
	filter: drop-shadow(0 0 2px black);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.