Image Comparison Slider

HTML

<div class="beforeAfterSlidebar">
    <div class="bottomImage">
    <img src="https://1.bp.blogspot.com/-CHLuJUDwH7Y/WP2a9BOneEI/AAAAAAAAAL0/aBMbGuxV-aQYi3WHyVF05DKGVc3ZlGX6QCLcB/s1600/Baahubali-after-vfx-effect-image.jpg">
    </div>
    
    <div class="topImage">
    <img src="https://4.bp.blogspot.com/-NjbTXZG72LM/WP2aBzP6K5I/AAAAAAAAALk/aFwlODiM4UU0Bqp45jAPUe9XdFtUq4uvgCLcB/s1600/Baahubali-before-vfx-effect-image.jpg">
    </div>
    
</div>
<div style="clear: both;"></div>
<img src="https://4.bp.blogspot.com/-NjbTXZG72LM/WP2aBzP6K5I/AAAAAAAAALk/aFwlODiM4UU0Bqp45jAPUe9XdFtUq4uvgCLcB/s1600/Baahubali-before-vfx-effect-image.jpg"><br>
bah

CSS

.beforeAfterSlidebar {
  position: relative;
  max-width:100%;
}
.beforeAfterSlidebar div {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.topImage {
  border-right: solid 4px black;
}

JavaScript

$(".topImage").css('width', '50%');
  $(".beforeAfterSlidebar").mousemove(
    function(e) {
      // get the mouse x (horizontal) position and offset of the div
      var offset =  $(this).offset();
      var iTopWidth = (e.pageX - offset.left);

      // set width of bottomimage div
      $(this).find(".topImage").width(iTopWidth);
    }
  );