Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Dual Image Reveal Control Tutorial

Published :
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>