En este artículo, veremos cómo crear un control deslizante de comparación de imágenes usando CSS. El Control deslizante de comparación de imágenes esencialmente ayuda a distinguir dos fotografías o productos. Como resultado, el usuario puede determinar rápidamente cuál de los dos productos o dos imágenes de una mejor manera.
Enfoque: El enfoque que estamos utilizando para hacer este Control deslizante de comparación de imágenes es muy básico y utiliza CSS puro. Para hacer el control deslizante, colocaremos las dos fotos una sobre la otra primero configurando la posición de las dos imágenes en absoluto . Luego, usaremos la propiedad de cambio de tamaño para cambiar el tamaño de la imagen superior horizontalmente, lo que revelará la imagen de abajo y eso nos ayudará a comparar dos fotos deslizando una sobre la otra.
Propiedades utilizadas:
- Resize-property : Nos permite redimensionar un elemento y también define la forma en que se puede redimensionar ese elemento.
- Posición-propiedad : Esta propiedad se utiliza para establecer cómo se posiciona un elemento en una página web.
Ejemplo: este ejemplo describe la creación del control deslizante de comparación de imágenes utilizando las propiedades de CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: rgb(17, 17, 17);
}
.image-slider {
margin-left: 3rem;
position: relative;
display: inline-block;
line-height: 0;
}
.image-slider img {
user-select: none;
max-width: 400px;
}
.image-slider > div {
position: absolute;
width: 25px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider > div:before {
content: '';
display: block;
width: 13px;
height: 13px;
overflow: hidden;
position: absolute;
resize: horizontal;
right: 3px;
bottom: 3px;
background-clip: content-box;
background: linear-gradient(-45deg, black 50%, transparent 0);
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
</style>
</head>
<body>
<div style="margin: 3rem;
font-family: Roboto, sans-serif">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3 style="color: aliceblue">
CSS Image Comparison Slider
</h3>
</div>
<div>
<div class="image-slider">
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220620060056/gfg.jpg"
alt="GFG_Image"/>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220620060143/gfg1.jpg"
alt="GFG_Image"/>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA