<html>
<head>
	<title>Image Protection Test</title>
</head>
<body>

	<div class="img-wrap">
		<img src="https://imagizer.imageshack.com/img924/5585/U4nLxC.png" alt="Real Image to Protect" />
		<div class="glass">
			<img src="https://imagizer.imageshack.com/img921/7237/9czFAt.png" alt="Fake Image to Deter" />
		</div>
	</div>

</body>
</html>
	img {
		max-width: 100%;
	}
	
	.img-wrap {
		position: relative;
		display: inline-block;
		border: 1px solid red;
		overflow: hidden;
	}
	
	.glass {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba( 0, 0, 70, 0.4 );
	}
	
	
	.glass img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		max-width: none;
		opacity: 0;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.