Efecto Lightbox con CSS

El efecto Lightbox es utilizado hace un tiempo ya para mostrar imágenes en tamaño grande o bien para algunas pantallas de login de usuarios o fuciones similares. Un ejemplo de ésto es el login de Review Me, que lo pueden observar en la imágen que adjunto al artículo.

Para implementar este efecto se suele usar un scritp de JavaScritp. Al ser tan pesada la librería este scritp, muchos dejaron de lado el efecto Lightbox ya que lo creían muy lento. Recientemente se ha publicado (sigt también habló sobre esto) otro modo de implementar un Lightbox, que intenta no basarse tanto en JavaScritp y si en hojas de estilo CSS.

El archivo que usamos para definir los estilos de nuestra página, deberá contener:


.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}


.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}


En el HTML, para mostrarlo:


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'"> Hacer clic</a>


Y para ocultarlo:


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'"> Ocultar</a>


Si quieren ver toda esta mezcla funcionando, lo pueden hacer desde aquí.

Existen muchos métodos para hacer este efecto. El comentado está interesante, tanto como éste que lo hace sin una gota de JS.