JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="slider">
  
  <div id="img2"></div>
  <div id="img1"></div>
</div>

CSS

body{
  background:white;
}
#slider{
  width:100%;
}
#img1{
  position:absolute;
  left:0;
  right:0;
  width:400px;
  height:400px;
  background:url(http://2.db-estate.cdn.pik-service.ru/attachment/98000/98220a79-fc1e-e511-84c6-001ec9d56418/1s-1_c544ace04c787355da552cf0698ae197.jpg);
  background-size: 400px auto;
}
#img2{
  width:400px;
  height:400px;
  background:url(http://1.db-estate.cdn.pik-service.ru/attachment/98000/98220a79-fc1e-e511-84c6-001ec9d56418/1s-1_9c92908ee41b8d687aab9a30b75e5792.png);
  background-size: 400px auto;
  position:absolute;
  left:0;
  right:0;
  background-color:#EEE;
}

JavaScript

$("#slider").bind("mousemove",function(e){
  $("#img1").css({width: e.clientX+"px"});
});
$("#slider").bind("mouseleave",function(e){
$("#img1").stop()
  $("#img1").animate({width:$("#img2").outerWidth()+"px"})
})