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