⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Dual Image Reveal Control Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲