LightBox con CSS y HTML
Las lightBox son ventanas con contenido que se abren encima de la página web, sin ocupar espacio, como flotando. Son ventanas popup que contienen inágenes, aunque en realidad pueden contener videos, texto... Es habitual verlas como contendor para carruseles de imágenes o para ampliar en detalle otra imagen (como para un zoom).
Aunque hay muchos programas elaborados con javascript para lograr este efecto, vas a ver que puedes tener una lighbox o popup sin programar, solo con HTML y un poco de CSS.
El efecto se base en los pseudo slectores, concretamente en :target
El código HTML
Nuestro código tiene dos elementos:
- Elemento para abrir la ventana lightbox
- La ventana lightbox con su botón de cierre y su contenido.
<a class="abrirLB" href="#Ventana">Abrir lightbox</a>
<div id="Ventana">
<div class="contenido">
<a class="cerrarLB" href="#">Cerrar X </a>
<img src="/imgs/cards0-img.jpg" width="401" height="301" alt=""/>
</div>
</div>
El elemento qeu va a abir la ventana es un enlace interno a la propia página (#Ventana). El bloque lightBox es el que tiene como identificador Ventana y contiene un bloque de class="contenido" con el enelace de cierre (un elnace vació en este caso) y el contendio que en esta ocasión es una imagen, pero puedes poner un bloque con lo que quieras.El estilo CSS
La magia del CSS en eta ocasión se base en el pseudo selector #ident:target que selecciona aquellos elementos cuyo id concide con el componente # que siga a la url de la página.
Por ejemplo si accedes a la página index.htm#seccion el selector #seccion:target selecciona el bloque cuyo id= seccion . En otras palabras: selecciona el destino del enlace en el interior de la página web.
Al pulsar sobre el enlace interno se aplica al bloque de destino el estilo seleccionado. Originalmente este bloque está oculto, al seleccionarlo se pone visible, con un botón que enlaza a la porpia página para cerrar así la ventana.
html, body{height:100%}
.abrirLB{
text-decoration:none;
}
#Ventana{
display:none
}
#Ventana:target{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
top:0;
left:0;
background-color:rgba(0,0,0,0.56);
width: 100%;
height: 100%;
}
.contenido{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
top:0;
left:0;
margin: 0 auto;
}
.cerrarLB{
align-self:flex-end;
color:white;
text-decoration:none;
}