Image Comparison Slider

by Mehul H.

HTML

<div class="beforeAfterSlidebar">
    <div class="bottomImage"><img src="https://community.devexpress.com/blogs/aspnet/16.2Release/ASPScheduler162/ASPScheduler_New162Look.png" width="750" height="469" alt="after" /></div>
    <div class="topImage"><img src="https://community.devexpress.com/blogs/aspnet/16.2Release/ASPScheduler162/ASPScheduler_Old161Look.png" width="750" height="469" alt="before" /></div>
</div>

CSS

.beforeAfterSlidebar {
  position: relative;
  width: 750px;
  height: 469px;
}
.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);
    }
  );