Crear una ventana modal tipo Lightbox con solo CSS
Si deseas mostrar imágenes de forma elegante en tu sitio web, una opción popular es utilizar una ventana modal tipo lightbox. Esta técnica permite que una imagen se muestre en una ventana emergente sin necesidad de recargar la página. A continuación, te mostraré cómo crear este efecto usando solo HTML y CSS, sin necesidad de usar JavaScript.
¿Qué es un Lightbox?
Un lightbox es una ventana modal que se superpone al contenido actual de la página, mostrando una imagen o una galería de imágenes en tamaño grande. Esto permite que los usuarios disfruten de una experiencia visual más atractiva sin salir de la página. Este efecto es muy popular en sitios web de fotografía y galerías en línea.
Importante: Utilizar un lightbox puede mejorar la experiencia de usuario en tu sitio web, sobre todo si estás trabajando con imágenes visualmente atractivas. Si te interesa saber más sobre cómo mejorar el SEO de tu sitio web, te recomiendo que leas este artículo sobre cómo crear el archivo robots.txt perfecto: Cómo crear el archivo robots.txt perfecto.
Estructura del código
A continuación, te muestro el código que crea una imagen dentro de un enlace. Cuando el usuario hace clic en la imagen, se activa el modal que contiene la misma imagen en una versión ampliada. Este efecto se logra utilizando el selector :target de CSS, lo que significa que no necesitamos ningún código JavaScript.
<div class="separator" style="clear: both;">
<a href="#lightbox">
<img alt="Imagen" border="0" data-original-height="488" data-original-width="1200"
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>
<div id="lightbox" class="modal">
<div class="modal-content">
<a href="#" class="close-btn">×</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmfj60KAajd7nh5flm3ewwpAucD73TE2pBjFqtCxUq0E3g5O4tiJUK92gG7xm42KYREG66SJ_vWVr-zrOfcKYuGgBifHDMDQG56pZbZdpo6sd_Qy2kFqMv7X3yRAWLmqQPt190P0nKc-Xh6LGIist5NeqhGB5_gzC15jFuFRTqdLv_aC-Ud40zNwweRE/s1600/Lightbox%20con%20solo%20CSS%20Puro.webp" alt="Imagen ampliada"/>
</div>
<!-- Fondo oscuro que permite cerrar al hacer clic -->
<a href="#" class="modal-background"></a>
</div>
¿Cómo funciona este código?
El código anterior crea una imagen dentro de un enlace. Cuando el usuario hace clic en la imagen, se activa el modal que contiene la misma imagen en una versión ampliada. Este efecto se logra utilizando el selector :target de CSS, lo que significa que no necesitamos ningún código JavaScript.
Estilos de CSS
A continuación, te muestro los estilos CSS necesarios para que el lightbox funcione correctamente:
/* General styles */
.container {
display: flex;
justify-content: center;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Show the modal when the anchor is clicked */
#lightbox:target {
display: flex;
}
/* Modal content */
.modal-content {
position: relative;
max-width: 80%;
max-height: 80%;
background-color: white;
padding: 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* Center the image */
.modal-content img {
max-width: 100%;
max-height: 100%;
height: auto;
border-radius: 8px;
}
/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 40px;
color: #fff;
text-decoration: none;
font-weight: bold;
z-index: 2;
}
.close-btn:hover {
color: #f44336;
}
/* Background that closes the modal when clicked */
.modal-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7); /* Same dark background */
z-index: -1; /* Behind the modal content */
cursor: pointer; /* Allow click to close */
}
/* Block the scroll on body when modal is active */
body.modal-open {
overflow: hidden;
}
/* Additional styles for smooth transition */
.modal-content img {
transition: transform 0.3s ease;
}
#lightbox:target .modal-content img {
transform: scale(1.05); /* Slight zoom effect */
}
Beneficios de usar solo CSS para el Lightbox
Simplicidad: Usar solo CSS para crear un lightbox simplifica el proceso de desarrollo, ya que no es necesario agregar código JavaScript adicional.
Rendimiento: Al no depender de scripts adicionales, la carga del sitio puede ser más rápida.
Accesibilidad: El uso de enlaces con el selector :target mejora la accesibilidad al permitir que los usuarios naveguen entre las imágenes con facilidad.
Si deseas conocer más sobre la optimización del SEO de tu sitio web, como el uso de archivos robots.txt para mejorar la indexación, te recomiendo leer este artículo: 3 pasos para indexar tu sitio web rápido.
Si necesitas aprender más sobre cómo hacer que tu sitio web sea más rápido para ser indexado por los motores de búsqueda, no dudes en consultar este artículo: 3 pasos para indexar tu sitio web rápido.
Conclusión
Crear un lightbox con CSS es una técnica sencilla y efectiva para mejorar la presentación de imágenes en tu sitio web. Además de ser visualmente atractiva, esta técnica permite ofrecer una experiencia de usuario más fluida sin la necesidad de scripts adicionales. Si sigues los pasos anteriores, podrás implementar este efecto de manera rápida y efectiva.
