En muchas ocasiones necesitamos mostrar la diferencia entre dos versiones de una imagen — ya sea para resaltar un cambio, una edición, o simplemente para ilustrar un antes y después. Crearemos un componente que permite deslizar una barra vertical para revelar la imagen de fondo, comparándola visualmente con otra que está por encima.

Esto se puede resolver de controlada usando HTML, CSS y algo de JavaScript. Vamos a verlo paso a paso.

HTML: estructura básica

Creamos un contenedor con dos imágenes. La segunda imagen irá dentro de otro contenedor que limitaremos en ancho. La barra deslizante se coloca encima.

<div class="comparison-container">
  <img src="imagen1.jpg" alt="Antes">
  <div class="img-overlay-container">
    <img src="imagen2.jpg" alt="Después" class="img-overlay">
  </div>
  <div class="slider-bar"></div>
</div>

• .img-overlay-container: contenedor que controla cuánto de la imagen superior se muestra.
• .img-overlay: imagen superior.
• .slider-bar: barra que se puede mover horizontalmente para cambiar la comparación.

CSS: estilos necesarios

A continuación, los estilos esenciales para posicionar todo correctamente. Añadimos algunas reglas clave que no conviene pasar por alto.

.comparison-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  user-select: none;
}

.comparison-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 50%;
  display: block;
}

.img-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}

.img-overlay {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 50%;
  display: block;
}

.slider-bar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 100%;
  background-color: #ffdd00;
  cursor: ew-resize;
  transform: translateX(-50%);
  z-index: 10;
}

Algunos detalles a considerar:

• user-select: none evita seleccionar texto accidentalmente al arrastrar.
• object-position: 0 50% asegura que la imagen se alinee correctamente si no es del mismo tamaño exacto que el contenedor.
• .img-overlay simplemente es la imagen superior.

JavaScript: funcionalidad del deslizador

El comportamiento es directo: al hacer clic y arrastrar la barra, modificamos el ancho del contenedor .img-overlay-container y reposicionamos la barra.

const container = document.querySelector('.comparison-container');
const overlay = container.querySelector('.img-overlay-container');
const slider = container.querySelector('.slider-bar');

let isDragging = false;

slider.addEventListener('mousedown', () => {
  isDragging = true;
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const rect = container.getBoundingClientRect();
  let offsetX = e.clientX - rect.left;

  if (offsetX < 0) offsetX = 0;
  if (offsetX > rect.width) offsetX = rect.width;

  const percentage = (offsetX / rect.width) * 100;

  overlay.style.width = `${percentage}%`;
  slider.style.left = `${percentage}%`;
});

El código es claro y directo. Rastrear el movimiento del mouse y ajustar estilos en tiempo real.

Resultado final

Puedes ver el ejemplo en funcionamiento:

Conclusión

Un comparador de imágenes deslizante es sencillo de implementar y puede aportar valor visual en ciertos escenarios.

Con HTML, CSS y un poco de JavaScript logramos un control absoluto que puede integrarse fácilmente en cualquier sitio web. Además, podemos extenderlo o modificarlo cuando surja la necesidad — sin mayores complicaciones.