▷ Creación de una GALERIA de IMÁGENES con efecto LIGHTBOX en HTML y CSS

 

🖼️ Cómo crear un efecto Lightbox solo con HTML y CSS

El efecto lightbox permite ampliar una imagen haciendo clic sobre ella, mostrándola centrada en pantalla con un fondo atenuado. Aunque normalmente se implementa con JavaScript, también es posible hacerlo usando solo HTML y CSS. A continuación, te muestro cómo.

---

📌 ¿Qué necesitamos?

• Una imagen en miniatura.
• Un enlace que apunte a un id del modal.
• Una estructura modal (lightbox) escondida que se activa con CSS.
• El uso de :target en CSS para mostrar la imagen ampliada.

---

🧪 Ejemplo funcional

<style>
/* Miniatura */
.thumbnail {
  width: 200px;
  cursor: pointer;
  transition: 0.3s;
}

.thumbnail:hover {
  opacity: 0.8;
}

/* Lightbox oculto */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  padding: 40px;
  background: rgba(0,0,0,0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

/* Imagen grande */
.lightbox img {
  max-width: 90%;
  max-height: 80vh;
  margin-top: 5%;
  border: 5px solid white;
  box-shadow: 0 0 15px #000;
}

/* Mostrar cuando el target es activo */
.lightbox:target {
  display: block;
}

/* Botón cerrar */
.lightbox a {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 30px;
  text-decoration: none;
  font-weight: bold;
}
</style>

📄 HTML:

<a href="#img1">
  <img src="https://via.placeholder.com/400x250" class="thumbnail" alt="Imagen miniatura">
</a>

<div class="lightbox" id="img1">
  <a href="#">×</a>
  <img src="https://via.placeholder.com/800x500" alt="Imagen ampliada">
</div>

---

📌 ¿Cómo funciona?

• 🔍 El enlace tiene como href="#img1", lo que apunta al id="img1" del lightbox.
• 🎯 Cuando haces clic, CSS detecta que #img1 es el objetivo actual y activa su estilo con :target.
• ❌ El botón “×” es un enlace a #, lo que desactiva el target y cierra el lightbox.

---

📷 ¿Puedo hacerlo con varias imágenes?

¡Por supuesto! Solo necesitas repetir el mismo patrón con IDs distintos:

<a href="#img2"><img src="thumb2.jpg"></a>
<div class="lightbox" id="img2">
  <a href="#">×</a>
  <img src="img2-grande.jpg">
</div>

---

💡 Ventajas de usar solo HTML y CSS

• ⚡ Rápido y sin scripts adicionales.
• 📵 Funciona sin JavaScript (útil para sitios educativos o estáticos).
• 📱 Compatible con móviles si usas max-width y max-height.

---

⚠️ Limitaciones

• No puedes agregar animaciones complejas fácilmente.
• No tiene navegación entre imágenes (anterior/siguiente).
• No se cierra con la tecla Esc (solo con clic en cerrar).

En el siguiente video te muestro como se realiza una galería lightbox usando solo HTML5 y CSS.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨