Imagen LightBox solo css

imagen-lightbox-solo-css.markdown

Imagen LightBox con solo css

HTML & CSS: Lightbox sin JavaScript

Este Codepen muestra una solución de lightbox completamente funcional usando solo HTML y CSS. Aprovecha la semántica de la etiqueta y el selector CSS :checked para crear un efecto de pantalla completa al hacer clic en una imagen, sin necesidad de una sola línea de JavaScript.

Es un ejemplo ingenioso de cómo se pueden lograr funcionalidades interactivas complejas utilizando los recursos nativos de la web, ideal para proyectos donde se busca la máxima simplicidad y rendimiento.

La clave de este truco está en la línea input:checked ~ .lightbox-overlay. El selector ~ (virgulilla o tilde) se llama "selector de hermanos generales" y significa "selecciona cualquier .lightbox-overlay que sea un hermano posterior del elemento input:checked".

De esta forma, cuando el usuario hace clic en la miniatura (), se marca el checkbox asociado. El selector CSS detecta este cambio de estado y hace que el overlay se muestre con display: flex. Al hacer clic en el overlay, se desmarca el checkbox y el overlay se oculta de nuevo, creando un ciclo de activación y desactivación sin JavaScript.

A Pen by Javier Diaz on CodePen.

License.

index.html

<label class="lightbox-trigger">
  <input type="checkbox" id="lightbox-checkbox-1" class="lightbox-checkbox" />
  <img src="https://picsum.photos/600/400" alt="Imagen de ejemplo" class="thumb" />
  <label class="lightbox-overlay" for="lightbox-checkbox-1">
    <img src="https://picsum.photos/600/400" alt="Imagen de ejemplo ampliada" />
  </label>
</label>

<p>Haz clic en la imagen para verla en pantalla completa.</p>
<p>
  Puedes duplicar el bloque label con class="lightbox-trigger;
  y cambiar el ID del input y el atributo "for" para crear múltiples lightboxes en
  una sola página.
</p>

style.css

/* Oculta el checkbox */
.lightbox-checkbox {
  display: none;
}

/* El contenedor del lightbox */
.lightbox-trigger {
  display: inline-block;
}

/* El overlay que cubre la pantalla */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
  cursor: pointer;
}

/* La imagen dentro del overlay */
.lightbox-overlay img {
  width: auto;
  height: 90vh;
  object-fit: contain;
}

/* La miniatura que se muestra por defecto */
.thumb {
  max-width: 100%;
  cursor: pointer;
  border-radius: 8px; /* Pequeño toque para que se vea mejor */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Regla clave: si el checkbox está marcado, muestra el overlay */
.lightbox-checkbox:checked ~ .lightbox-overlay {
  display: flex;
}