<div id="contenedor">
  <figure>
    <div id="separador"></div>
  </figure>
  <input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="deslizador" />
</div>

<!-- Idea original: http://thenewcode.com/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5 -->
body {
	margin:0;
}

#contenedor { 
  background:url(https://cdn.josetxu.com/img/before-after-effect-bg.jpg) no-repeat center center; /*fondo*/
	height: 73.5vw;
	margin: 1vw auto;
	max-height: 750px;
	max-width: 1000px;
	overflow: hidden;
	width: 98vw;
}
#contenedor figure { 
	background-image: url(https://cdn.josetxu.com/img/before-after-effect-01.jpg);
	background-size: cover;
	font-size: 0;
	height: 100%;
	margin: 0; 
	position: relative;
	width: 100%; 
}

#separador {
	background-image: url(https://cdn.josetxu.com/img/before-after-effect-02.jpg);
	background-size: cover;
	bottom: 0;
	border-right: 5px solid rgba(255,255,255,0.7);
	box-shadow: 10px 0 15px -13px #000;
	height: 100%;
	max-width: 98.6%;
	min-width: 0.6%;
	overflow: visible;
	position: absolute;
	width: 50%; 
	animation: figure 2s 1 normal ease-in-out 0.1s; 
	-webkit-animation: figure 2s 1 normal ease-in-out 0.1s; 
}

/*barra input */
input#deslizador {
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none; 
	background: transparent;
	cursor: col-resize;
	height: 100vw;
	left: 0;
	margin: 0;
	outline: none; 
	padding: 0;
	position: relative;
	top: -100vw;
	width: 100%;
}
/*barra input mozilla*/
input#deslizador::-moz-range-track { 
	background: transparent; 
}
/*barra input ie*/
input#deslizador::-ms-track {
	border: none; 
	background-color: transparent;
	height: 100vw; 
	left: 0; 
	outline: none; 
	position: relative;
	top: -100vw; 
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: col-resize;
	color:transparent;
}
input#deslizador::-ms-fill-lower {
	background-color:transparent;
}

/*boton input chrome*/
input#deslizador::-webkit-slider-thumb {
	-webkit-appearance:none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}
/*boton input mozilla*/
input#deslizador::-moz-range-thumb {
	-moz-appearance: none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}   
/*boton input ie*/
input#deslizador::-ms-thumb {
	height: 100vw;
	width: 0.5%; 
	opacity:0;
}
input#deslizador::-ms-tooltip {
	display:none;
}

/*flechas*/
#separador::before {
	background: url(https://cdn.josetxu.com/img/before-after-effect-arrows.png) no-repeat scroll 0 center transparent;
	background-size:contain;
	content: " ";
	float: right;
	height: 100%;
	margin-right: -34px;
	position: relative;
	top:0;
	width: 64px;
}
		
/*animacion*/
@keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
/*animacion chrome*/
@-webkit-keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
function beforeAfter() {
  document.getElementById('separador').style.width = document.getElementById('deslizador').value + "%";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.