Before and after comparison

Show off your post-processing/retouching ability by adding a "before-and-after" comparison of your editing skills to your page!

Installation

Add an HTML block to the page and add this HTML code to it:

<div class="ss-before-and-after">
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span><span class="ss-before-and-after-hover"></span>  
	<span class="ss-before-and-after-hover"></span>
  
	<div class="ss-before-and-after-before">
		<div>
			<img src="https://n-sherlock.smugmug.com/photos/i-Wn2CbdZ/0/X3/i-Wn2CbdZ-X3.jpg" />
		</div>		
	</div>
	<div class="ss-before-and-after-after">
		<div>		
			<img src="https://n-sherlock.smugmug.com/photos/i-McVBncC/0/X3/i-McVBncC-X3.jpg" />
		</div>		
	</div>
</div>

Add this CSS to the block's CSS tab, or to your theme's CSS:

.ss-before-and-after {
	position: relative;
	overflow: hidden;
	margin: 1em 0;	
}
.ss-before-and-after-before {
    position: relative;
}
.ss-before-and-after-after {
	position: absolute;
	    
	top: 0;
	left: 0;
    right:0;
    bottom: 0;
	overflow: hidden;
}

.ss-before-and-after-after > div {
	position: relative;
}

/* Set the initial position of the split between before/after */
.ss-before-and-after-after {
  left: 50%;
}
.ss-before-and-after-after > div {
  left: -50%;
}

.ss-before-and-after-after,
.ss-before-and-after-after > div {
	-webkit-transition: left 0.5s;
	-moz-transition: left 0.5s;
	transition: left 0.5s;
}

.ss-before-and-after-before,
.ss-before-and-after-after,
.ss-before-and-after div,
.ss-before-and-after div img {
	width: 100%;
	display: block;
}

/* Add "before" and "after" labels to images */
.ss-before-and-after-before > div:after,
.ss-before-and-after-after > div:after {
	padding:0.5em;
	background-color:rgba(0,0,0,0.25);
	color:#eee;
	font-size:14px;
	position:absolute;
	bottom:1em;
}
.ss-before-and-after-before > div:after {
	content: "Before";
	left:1em;
}
.ss-before-and-after-after > div:after {
	content: "After";
	right:1em;
}

.ss-before-and-after-hover {
	position: absolute;
	z-index: 1;

	width: 5%;
	height: 100%;
	
	display: block;
	top: 0;
	bottom: 0;
}
.sm-page-edit .ss-before-and-after-hover {
	z-index: default;
}

/* Separator between images */
.ss-before-and-after-after {
    box-shadow:0 0 10px rgba(0,0,0,0.8);
}

.ss-before-and-after-hover:nth-of-type(1) { left: 0% }
.ss-before-and-after-hover:nth-of-type(2) { left: 4.761904761904762% }
.ss-before-and-after-hover:nth-of-type(3) { left: 9.523809523809524% }
.ss-before-and-after-hover:nth-of-type(4) { left: 14.285714285714285% }
.ss-before-and-after-hover:nth-of-type(5) { left: 19.047619047619047% }
.ss-before-and-after-hover:nth-of-type(6) { left: 23.80952380952381% }
.ss-before-and-after-hover:nth-of-type(7) { left: 28.57142857142857% }
.ss-before-and-after-hover:nth-of-type(8) { left: 33.333333333333336% }
.ss-before-and-after-hover:nth-of-type(9) { left: 38.095238095238095% }
.ss-before-and-after-hover:nth-of-type(10) { left: 42.857142857142854% }
.ss-before-and-after-hover:nth-of-type(11) { left: 47.61904761904762% }
.ss-before-and-after-hover:nth-of-type(12) { left: 52.38095238095238% }
.ss-before-and-after-hover:nth-of-type(13) { left: 57.14285714285714% }
.ss-before-and-after-hover:nth-of-type(14) { left: 61.904761904761905% }
.ss-before-and-after-hover:nth-of-type(15) { left: 66.66666666666667% }
.ss-before-and-after-hover:nth-of-type(16) { left: 71.42857142857143% }
.ss-before-and-after-hover:nth-of-type(17) { left: 76.19047619047619% }
.ss-before-and-after-hover:nth-of-type(18) { left: 80.95238095238095% }
.ss-before-and-after-hover:nth-of-type(19) { left: 85.71428571428571% }
.ss-before-and-after-hover:nth-of-type(20) { left: 90.47619047619048% }
.ss-before-and-after-hover:nth-of-type(21) { left: 95.23809523809524% }

.ss-before-and-after-hover:nth-of-type(1):hover ~ .ss-before-and-after-after { left: 0%; }
.ss-before-and-after-hover:nth-of-type(1):hover ~ .ss-before-and-after-after > div { left: 0%; }
.ss-before-and-after-hover:nth-of-type(2):hover ~ .ss-before-and-after-after { left: 5%; }
.ss-before-and-after-hover:nth-of-type(2):hover ~ .ss-before-and-after-after > div { left: -5%; }
.ss-before-and-after-hover:nth-of-type(3):hover ~ .ss-before-and-after-after { left: 10%; }
.ss-before-and-after-hover:nth-of-type(3):hover ~ .ss-before-and-after-after > div { left: -10%; }
.ss-before-and-after-hover:nth-of-type(4):hover ~ .ss-before-and-after-after { left: 15%; }
.ss-before-and-after-hover:nth-of-type(4):hover ~ .ss-before-and-after-after > div { left: -15%; }
.ss-before-and-after-hover:nth-of-type(5):hover ~ .ss-before-and-after-after { left: 20%; }
.ss-before-and-after-hover:nth-of-type(5):hover ~ .ss-before-and-after-after > div { left: -20%; }
.ss-before-and-after-hover:nth-of-type(6):hover ~ .ss-before-and-after-after { left: 25%; }
.ss-before-and-after-hover:nth-of-type(6):hover ~ .ss-before-and-after-after > div { left: -25%; }
.ss-before-and-after-hover:nth-of-type(7):hover ~ .ss-before-and-after-after { left: 30%; }
.ss-before-and-after-hover:nth-of-type(7):hover ~ .ss-before-and-after-after > div { left: -30%; }
.ss-before-and-after-hover:nth-of-type(8):hover ~ .ss-before-and-after-after { left: 35%; }
.ss-before-and-after-hover:nth-of-type(8):hover ~ .ss-before-and-after-after > div { left: -35%; }
.ss-before-and-after-hover:nth-of-type(9):hover ~ .ss-before-and-after-after { left: 40%; }
.ss-before-and-after-hover:nth-of-type(9):hover ~ .ss-before-and-after-after > div { left: -40%; }
.ss-before-and-after-hover:nth-of-type(10):hover ~ .ss-before-and-after-after { left: 45%; }
.ss-before-and-after-hover:nth-of-type(10):hover ~ .ss-before-and-after-after > div { left: -45%; }
.ss-before-and-after-hover:nth-of-type(11):hover ~ .ss-before-and-after-after { left: 50%; }
.ss-before-and-after-hover:nth-of-type(11):hover ~ .ss-before-and-after-after > div { left: -50%; }
.ss-before-and-after-hover:nth-of-type(12):hover ~ .ss-before-and-after-after { left: 55%; }
.ss-before-and-after-hover:nth-of-type(12):hover ~ .ss-before-and-after-after > div { left: -55%; }
.ss-before-and-after-hover:nth-of-type(13):hover ~ .ss-before-and-after-after { left: 60%; }
.ss-before-and-after-hover:nth-of-type(13):hover ~ .ss-before-and-after-after > div { left: -60%; }
.ss-before-and-after-hover:nth-of-type(14):hover ~ .ss-before-and-after-after { left: 65%; }
.ss-before-and-after-hover:nth-of-type(14):hover ~ .ss-before-and-after-after > div { left: -65%; }
.ss-before-and-after-hover:nth-of-type(15):hover ~ .ss-before-and-after-after { left: 70%; }
.ss-before-and-after-hover:nth-of-type(15):hover ~ .ss-before-and-after-after > div { left: -70%; }
.ss-before-and-after-hover:nth-of-type(16):hover ~ .ss-before-and-after-after { left: 75%; }
.ss-before-and-after-hover:nth-of-type(16):hover ~ .ss-before-and-after-after > div { left: -75%; }
.ss-before-and-after-hover:nth-of-type(17):hover ~ .ss-before-and-after-after { left: 80%; }
.ss-before-and-after-hover:nth-of-type(17):hover ~ .ss-before-and-after-after > div { left: -80%; }
.ss-before-and-after-hover:nth-of-type(18):hover ~ .ss-before-and-after-after { left: 85%; }
.ss-before-and-after-hover:nth-of-type(18):hover ~ .ss-before-and-after-after > div { left: -85%; }
.ss-before-and-after-hover:nth-of-type(19):hover ~ .ss-before-and-after-after { left: 90%; }
.ss-before-and-after-hover:nth-of-type(19):hover ~ .ss-before-and-after-after > div { left: -90%; }
.ss-before-and-after-hover:nth-of-type(20):hover ~ .ss-before-and-after-after { left: 95%; }
.ss-before-and-after-hover:nth-of-type(20):hover ~ .ss-before-and-after-after > div { left: -95%; }
.ss-before-and-after-hover:nth-of-type(21):hover ~ .ss-before-and-after-after { left: 100%; }
.ss-before-and-after-hover:nth-of-type(21):hover ~ .ss-before-and-after-after > div { left: -100%; }

In the HTML, just replace the two links to the images to your own photos! Here's what the finished result looks like. Swipe from left to right to reveal the "before" image.

Tweaks

Do you want to start off by showing the entire After image? Add this CSS to the bottom:

/* Show the "after" image initially */
.ss-before-and-after-after {
  left: 0%;
}
.ss-before-and-after-after > div {
  left: 0%;
}

Or you can show the entire Before image instead by adding this CSS:

/* Show the "before" image initially */
.ss-before-and-after-after {
  left: 100%;
}
.ss-before-and-after-after > div {
  left: -100%;
}

Do you want the mouse to snap directly to the cursor while hovering, instead of using the smooth transition? Add this CSS:

.ss-before-and-after:hover .ss-before-and-after-after,
.ss-before-and-after:hover .ss-before-and-after-after > div {
	transition:none !important;
}