<div class="beforeafter">
    <div class="ba-mask"></div>
    <div class="ba-bg"></div>
    <div class="ba-caption"></div>
    <img src="image-1.jpg" alt="Before" width="500" height="280">
    <img src="image-2.jpg" alt="After" width="500" height="280">     
</div>

#container {width:500px; margin:0 auto;}
         
/* width and height for the block */
.beforeafter {width:500px; height:280px;}      
         
         
/* The following is the mandatory styling for the plugins */
     
.ba-mask {  /* first image */  
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    border-right:4px solid #000;
    overflow:hidden;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);
}
 
.ba-bg {    /* second image */
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
 
.ba-caption {   /* caption  */
             
    /* mandatory */
    position:absolute;
    bottom:10px;
    left:10px;
    z-index:120;   
              
    /* customizable styling */
    background:#000;
    color:#fff;
    text-align:center;
    padding:5px;
    font-size:12px;
    font-family:arial;
    filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;
    -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;          
}

$(document).ready(function() {
	
		// Some options for customization
		var leftgap = 10;		/* gap on the left */
		var rightgap = 10;		/* gap on the right */
		var defaultgap = 50;	/* the intro gap */
		var caption = true;		/* toggle caption */
		var reveal = 0.5;		/* define 0 - 1 far does it goes to reveal the second caption */
		
		// find each of the .beforeafter
		$('.beforeafter').each(function () {
		
			// set current selected item to variable
			var i = $(this);			
			// get the source of the first image and second image using eq(index)
			var img_mask = i.children('img:eq(0)').attr('src');
			var img_bg = i.children('img:eq(1)').attr('src');
			
			// get the caption for the first image as default caption
			var img_cap_one = i.children('img:eq(0)').attr('alt');
			
			// get the dimension of the first image, assuming second image has the same dimension
			var width = i.children('img:eq(0)').width();
			var height = i.children('img:eq(0)').height();
			
			// hide the images, not removing it because we will need it later
			i.find('img').hide();		
			
			// set some css attribute to current item
			i.css({'overflow': 'hidden', 'position': 'relative'});
			
			// append additional html element
			i.append('<div class="ba-mask"></div>');
			i.append('<div class="ba-bg"></div>');			
			i.append('<div class="ba-caption">' + img_cap_one + '</div>');						
			
			// set the dimension of appended html element
			i.children('.ba-mask, .ba-bg').width(width);
			i.children('.ba-mask, .ba-bg').height(height);
			
			// set the images as background for ba-mask and ba-bg
			i.children('.ba-mask').css('backgroundImage','url(' + img_mask + ')');
			i.children('.ba-bg').css('backgroundImage','url(' + img_bg + ')');				

			// animate to reveal the background image
			i.children('.ba-mask').animate({'width':width - defaultgap}, 1000);		

			// if caption is true, then display it, otherwise, hide it
			if (caption) i.children('.caption').show();
			else i.children('.ba-caption').hide();
			
		}).mousemove(function (e) {

			// set current selected item to variable
			var i = $(this);
			
			// get the position of the image
			pos_img = i.position()['left'];
			
			// get the position of the mouse pointer
			pos_mouse = e.pageX;		
			
			// calculate the difference between the image and cursor
			// the difference will the width of the mask image
			new_width = pos_mouse - pos_img;
			img_width = i.width();
			
			// get the captions for first and second images
			img_cap_one = i.children('img:eq(0)').attr('alt');
			img_cap_two = i.children('img:eq(1)').attr('alt');
			
			/*
			// for debugging purposes
			$('#debug').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
			$('#debug2').html(i.position()['left']);
			$('#debug3').html(new_width);
			*/
			
			// make sure it reveal the image and left some gaps on left and right
			// it depends on the value of leftgap and rightgap
			if (new_width > leftgap && new_width < (img_width - rightgap)) {			
				i.children('.ba-mask').width(new_width);
			}	

			// toggle between captions.
			// it uses the reveal variable to calculate
			// eg, display caption two once the image is 50% (0.5) revealed.
			if (new_width < (img_width * reveal)) {			
				i.children('.ba-caption').html(img_cap_two);
			} else {
				i.children('.ba-caption').html(img_cap_one);			
			}	 								
						
		});
		
	  });