Crea tu web, tutor html, css

LightBox con CSS y HTML

Las liaghtBos son ventanas que se abren encima de la página web, sin ocupar espacio, como flotando. Pueden contener iménges, vidioes, texto... Es habitual verlas como contendor para carusles de imágenes.

Aunque hay muchos programas elaborados con javascript para lograr este efect, vas a ver que puedes tener una lighbox 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;
}