El deslizador de comparación de imágenes CSS puro

Vista prévia

Descripción

Un deslizador de comparación de imágenes HTM/CSS puro hecho usando la entrada del Slider de rango y CSS : después de y : antes de pseudo clases para el pulgar deslizante.

Actualmente funciona en navegadores basados en WebKit: Chrome, Safari y opera.

Funcionamiento

Cree una entrada de control deslizante de rango para el control deslizante de comparación de imágenes.

<input type='range' value='50'>

Estilo el deslizador de comparación de imagen y añadir antes/después de las imágenes como así:

input[type='range'] {

-webkit-appearance: none;

-moz-appearance: none;

background: none;

display: block;

cursor: pointer;

margin: 0 auto;

height: 10px;

width: 444px;

left: -10px;

position: relative;
}

input[type='range']:after {

content: '';

width: 900px;

position: absolute;

height: 100vh;

left: 31px;

top: -8px;

background-image: url(after.png);

display: block;

background-position: left;

background-size: 400px;

background-repeat: no-repeat;
}

input[type='range']:focus { outline: none; }
input[type='range']::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 30px;
 width: 15px;
 border-radius: 3px;
 background: #b378ef;
 cursor: pointer;
 margin-top: -14px;
 z-index: 99;
}

input[type='range']::-webkit-slider-thumb:before {
 content: '';
 width: 420px;
 border-left: 1px solid rgba(0, 0, 0, 0.12);
 position: relative;
 height: 100vh;
 top: 30px;
 left: 7px;
 z-index: 1;
 background-image: url(before.png);
 display: block;
 background-position: center center;
 background-size: 400px;
 background-repeat: no-repeat;
 background-attachment: fixed;
}