Cómo crear un Lightbox con CSS y sin librerias Javascript

Los efectos tipo "Lightbox" para mostrar imágenes o páginas de login pueden resultar muy útiles si se implementan bien. Aunque cuando se empezaron a utilizar de forma masiva hace cosa de medio año o así fueron tan "abusados" que hoy en día parece que hayan desaparecido de la mayor parte de sitios.

El principal problema que tenía el Lightbox original era el requerir una librería javascript llamada script.aculo.us del que su tamaño no era precisamente ligero. Y para muchos recargar con 100KB de Javascript una web para mostrar un efecto "bonito" a la hora de mostrar imágenes pues no deja de ser una pijada.

Emanuele Feronato nos propone una alternativa sin Javascript. O mejor dicho: una alternativa sin utilizar librerías javascript.

La idea es crear el efecto con CSS y llamarlo con un enlace Javascript, sin duda mucho más ligero que algunas librerías que hay por ahí:

.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;   
}

Luego el código HTML debe ser parecido a esto:

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

Y el código para ocultarlo:

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

Tenéis un resultado final en su página de ejemplo. La verdad es que está curioso, pero no me acaba de convencer del todo (los enlaces no son seguibles y falta afinar el código). Mientras no se puedan usar clases CSS3 prefiero SlimBox.

Actualización: Este ejemplo tampoco está nada mal, es CSS y XHTML puro (0% javascript) pero no funciona en Internet Explorer y al menos en mi Firefox el consumo se dispara para mostrar una imagen de mala manera.