Dual Image Reveal Control Tutorial
Learn to create a dual image reveal control interface using very slim JavaScript and the CSS clip property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.reveal{
width: 280px;
height: 280px;
border:#000 1px solid;
float:left;
margin:24px;
}
.reveal > img{
position:absolute;
}
.reveal > .img2{
clip:rect(0px, 140px, 280px, 0px); /* top, right, bottom, left */
}
.reveal > .activator{
position:absolute;
width:280px;
height:280px;
opacity:0;
cursor: e-resize;
}
</style>
<script>
function reveal(event){
event.target.previousElementSibling.style.clip = "rect(0px, "+(event.clientX-event.target.offsetLeft)+"px, 280px, 0px)";
}
</script>
</head>
<body>
<div class="reveal">
<img src="1.jpg">
<img class="img2" src="2.jpg">
<div class="activator" onmousemove="reveal(event)"></div>
</div>
<div class="reveal">
<img src="3.jpg">
<img class="img2" src="4.jpg">
<div class="activator" onmousemove="reveal(event)"></div>
</div>
</body>
</html>