imalsogreg/beforeafter.html

## beforeafter.html
<!DOCTYPE HTML>
<html>
  <head>

    <!-- Import jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


    <!-- Inline style-->
    <!-- Adjust width/height according to picture size -->
    <style>
       .before_after_slider {
         position: relative;
         margin: 60px;
         width: 640px;
         height: 400px;
       }

       .before_after_slider > * {
         position: absolute;
       }

       .black_white {
         overflow: hidden;
       }
    </style>
  </head>
  <body>
    <div class="before_after_slider">
      <div class="color">
        <img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt=""/>
      </div>
      <div class="black_white">
        <img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400" alt="black_white"/>
      </div>
    </div>


    <!-- Inline script (uses jQuery) -->
    <!-- Copied from http://codepen.io/ace/pen/BqEer -->
    <!-- Since it refers to objects in the DOM, we
         have to put it at the end of <body>         -->
    <script>
      var $black_white = $('.black_white');
      var img_width = $('.black_white img').width();
		  var init_split = Math.round(img_width/2);

      $black_white.width(init_split);

		  $('.before_after_slider').mousemove(function(e){
		    var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
			  $black_white.width(offX);
		  });

		  $('.before_after_slider').mouseleave(function(e){
		    $black_white.stop().animate({
		      width: init_split
		    },1000)
		  });
    </script>

  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>

	<!-- Import jQuery library -->
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


	<!-- Inline style-->
	<!-- Adjust width/height according to picture size -->
	<style>
	.before_after_slider {
	position: relative;
	margin: 60px;
	width: 640px;
	height: 400px;
	}

	.before_after_slider > * {
	position: absolute;
	}

	.black_white {
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div class="before_after_slider">
	<div class="color">
	<img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt=""/>
	</div>
	<div class="black_white">
	<img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400" alt="black_white"/>
	</div>
	</div>


	<!-- Inline script (uses jQuery) -->
	<!-- Copied from http://codepen.io/ace/pen/BqEer -->
	<!-- Since it refers to objects in the DOM, we
	have to put it at the end of <body> -->
	<script>
	var $black_white = $('.black_white');
	var img_width = $('.black_white img').width();
	var init_split = Math.round(img_width/2);

	$black_white.width(init_split);

	$('.before_after_slider').mousemove(function(e){
	var offX = (e.offsetX \|\| e.clientX - $black_white.offset().left);
	$black_white.width(offX);
	});

	$('.before_after_slider').mouseleave(function(e){
	$black_white.stop().animate({
	width: init_split
	},1000)
	});
	</script>

	</body>
	</html>