JQ – Photo – Before After Slide Effect

The code:

<!DOCTYPE html>
<html>                                                                 
<head>

<style>
.beforeAfterSlidebar {
  position: relative;
  width: 800px;  /* Same of the images */
  height: 450px; /* Same of the images */
}
.beforeAfterSlidebar div {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;  /* Hide the overflow bar */
}
.topImage {
  border-right: solid 4px white; /* the right border of before image */
  /* the white color is the same of the main page background */
  /* with a different color you might see a little bug: the border line might run outside the beforeAfterSlidebar div */
}
</style> 

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>

<script type="text/javascript">
$(window).load(function() {
  $(".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 topImage div
      $(this).find(".topImage").width(iTopWidth);
    }
  );
})
</script>
</head>
  
<body>
<div class="beforeAfterSlidebar">
   <div class="bottomImage"><img src="css/images-gimme-code-2013-0042/after.jpg" width="800" height="450" alt="after" /></div>
   <div class="topImage"><img src="css/images-gimme-code-2013-0042/before.jpg" width="800" height="450" alt="before" /></div>
</div>
</body>
  
</html>

Basically what we are doing is finding the mouse position inside the “beforeAfterSlidebar” div, then setting the width of the top image’s div to that. We only care about the x (horizontal) position. First you need to get the offset – this is the position of the div on the page. pageX returns the x position of the mouse on the page. So to find the position of the mouse in the div, you subtract the offset from the page position.

Since the position of the mouse inside that div is how much of the top image we want to show (the width), you then set the width of the container div to that position. Now you now have your split image!

DEMO

 

Reference: http://upstairsweb.com

My official WebSite >