<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-comp-container {
position: relative;
height: 200px;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow:hidden;
}
.img-comp-img img {
display:block;
vertical-align:middle;
}
.img-comp-slider {
position: absolute;
z-index:9;
cursor: ew-resize;
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
</style>
<script>
function initComparisons() {
var x, i;
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
compareImages(x[i]);
}
function compareImages(img) {