otra forma de hacer un lightbox con solo css y html 🤖 Kolectiva

otra forma de hacer un lightbox con solo css y html

Hoy te muestro una forma sencilla de crear un efecto lightbox sin usar JavaScript, solo con HTML y CSS puro. Es ideal para blogs ligeros o cuando no quieres cargar bibliotecas externas.

¿Qué es un lightbox?

Un lightbox es una técnica para mostrar imágenes en un formato emergente al hacer clic sobre ellas, oscureciendo el fondo y centrando la imagen en pantalla.

HTML básico de la imagen

Este es el HTML original que usamos para mostrar la imagen en miniatura. Al hacer clic en ella, activará el lightbox usando un ancla con href="#lightbox".

<div class="separator" id="lightbox">
  <a href="#lightbox" style="display: block; padding: 1em 0px; text-align: center;">
    <img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmfj60KAajd7nh5flm3ewwpAucD73TE2pBjFqtCxUq0E3g5O4tiJUK92gG7xm42KYREG66SJ_vWVr-zrOfcKYuGgBifHDMDQG56pZbZdpo6sd_Qy2kFqMv7X3yRAWLmqQPt190P0nKc-Xh6LGIist5NeqhGB5_gzC15jFuFRTqdLv_aC-Ud40zNwweRE/s1600/Lightbox%20con%20solo%20CSS%20Puro.webp" />
  </a>
</div>



Busca esta línea en tu HTML: <data:post.body/>

Debajo vas a poner:

<div id='lightbox'>
  <a class='close' href='#cerrar'>&#215;</a>
  <img expr:alt='data:page.title' expr:src='data:post.firstImageUrl'/>
  <!-- Fondo oscuro que permite cerrar al hacer clic -->
  <a class='cerrar-modal' href='#cerrar'/>
</div>

Estilos CSS para el efecto lightbox

Aquí está el código CSS que hace toda la magia. Lo puedes insertar en la sección de estilos de tu blog.

/* Estilos del fondo oscuro */
#lightbox{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;flex-direction:column;overflow:hidden}#lightbox:target{display:flex}#lightbox .cerrar-modal{position:absolute;width:100%;height:100%;top:0;left:0;z-index:999;cursor:pointer}#lightbox img{width:auto;height:auto;max-width:90%;max-height:80vh;box-shadow:0 0 20px #fff;z-index:1000;pointer-events:none}#lightbox .close{position:absolute;top:20px;right:20px;color:#fff;font-size:30px;cursor:pointer;text-decoration:none;z-index:1001}

Importante: Este método funciona gracias al uso del selector :target, que reacciona cuando un elemento con un ID específico es referenciado en la URL (como #lightbox).

Cómo cerrar el lightbox

Para salir del lightbox, puedes hacer clic fuera de la imagen o añadir un botón de cierre con un enlace que apunte a # (que limpia el hash en la URL).

<a href="#" style="position: fixed; top: 20px; right: 30px; color: white; font-size: 2em;">×</a>

Resultado final

Al hacer clic en la imagen siguiente, se activará el lightbox gracias al selector :target de CSS.

<div class="separator" id="poner aqui la ide del lightbox">
  <a href="#lightbox" style="display: block; padding: 1em 0px; text-align: center;">
    <img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmfj60KAajd7nh5flm3ewwpAucD73TE2pBjFqtCxUq0E3g5O4tiJUK92gG7xm42KYREG66SJ_vWVr-zrOfcKYuGgBifHDMDQG56pZbZdpo6sd_Qy2kFqMv7X3yRAWLmqQPt190P0nKc-Xh6LGIist5NeqhGB5_gzC15jFuFRTqdLv_aC-Ud40zNwweRE/s1600/Lightbox%20con%20solo%20CSS%20Puro.webp" />
  </a>
</div>