Futurebox: Un experimento con CSS

Futurebox es un experimento para crear algo así como una ventana modal al estilo que lo hace LightWindow, iBox, FloatBox o cualquier otro script pero .. sin JavaScript, usando sólo CSS3. Esto, quiere decir que no funcionará en Internet Explorer pero si lo hará en Firefox, Opera, Safari y Chrome ya que se basa en la posibilidad que da una pseudo clase llamada :target.

El código HTML para las miniaturas sería algo así:

<a href="#contenedor1">
  <img src="URL_imagenMiniatura" width="ancho" height="alto" id="imagenM1" />
</a>

En cada una colocaremos un atributo href con el nombre del contenedor (siempre diferentes) y cada miniatura también tendrá un nombre único.

Ahora el modelo del contenedor que permanecerá oculto y que es donde está la imagen original:

<div class="overlay" id="contenedor1">
  <div class="overlay_container">
    <a href="#close">
      <img src="URL_imagenOriginal" width="ancho" height="alto" />
    </a>
  </div>
</div>

Lo que faltarías, sería el estilo CSS:

<style>
.overlay{
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.overlay .overlay_container{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.overlay_container img{
  background-color: #678;
  padding: 15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.overlay:target {
  display: table;
}
</style>

REFERENCIAS:anieto2k