A Pen by And Finally.

index.html

  <div id="inked-painted">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked" alt>
    <div id="colored"></div>
  </div>

Interactive-Before-After-Image-Comparison.markdown

Interactive Before-After Image Comparison

A variation on my previous work.

Forked from Dudley Storey's Pen Interactive Before-After Image Comparison.

A Pen by And Finally on CodePen.

License.

script.js

var inkbox = document.getElementById("inked-painted");
var colorbox = document.getElementById("colored");
var fillerImage = document.getElementById("inked");
inkbox.addEventListener("mousemove",trackLocation,false);
inkbox.addEventListener("touchstart",trackLocation,false);
inkbox.addEventListener("touchmove",trackLocation,false);

function trackLocation(e)
{
  
  var pageX = e.pageX,
  event = e,
  rect = inkbox.getBoundingClientRect();
  if (e.type == 'touchstart' || e.type == 'touchmove') pageX = e.touches[0].pageX;
  
  var position = ((pageX - rect.left) / inked.offsetWidth) * 100;
  if (position <= 100) {
    colorbox.style.width = position + "%";
  }

}

style.css

body { background: #113; }
div#inked-painted { 
  position: relative; font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#inked-painted img { 
  width: 100%; height: auto; 
}
div#colored { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 50%;
  background-size: cover; 
}
div#inked-painted:hover {
  cursor: col-resize; 
}

This is a very simple approach thank you,
I notice there is a lot of jitter in the left hand image when hovering the image(s) with any amount of mouse
movement do you have any idea how to reduce/eliminate the jitter of the left image moving?