csslightbox1

Una manera sencilla de crear un lightbox para mostrar nuestras imágenes redimensionadas, de forma sencilla, y solo mediante CSS.

Pasos a seguir:

  1. Este es el código CSS a manejar:
  2. img {
    border: 1px solid #ccc;
    padding: 3px;
    margin: 0 1em 0 1em;
    }
    div.lb img {
    margin-top: 4em;
    padding: 2em;
    background: #fff;
    }
    div.lb {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background: url('screen.png');
    }
    div.lb:target {
    display: block;
    }
    /** IE no soporta :target, así que usaremos expresiones CSS **/
    div.lb {
    display: expression((document.location.toString().split('#').slice(1) == this.
    id)?'block':'none');
    }

    Como vemos, consta de un div en forma de bloque para poder ver la imagen en tamaño real, así como una imagen llamada en este caso, “screen.png” si queremos mostrar algún fondo (si no se mostrará opaco). Internet Explorer no soporta el atributo :target, así que usaremos expresiones regulares de CSS.

  3. Ahora deberemos irnos a nuestro documento HTML y pegar esto:
  4. Este código será para mostrar las miniaturas:

    <a href="#lb4"></a>
    <a href="#lb1"></a>
    <a href="#lb2"></a>
    <a href="#lb3"></a>

    Y este será para las imágenes reales:

    <div id="lb1" class="lb"><a href="#top"></a></div>
    <div id="lb2" class="lb"><a href="#top"></a></div>
    <div id="lb3" class="lb"><a href="#top"></a></div>
    <div id="lb4" class="lb"><a href="#top"></a></div>
  5. Y listo, ya tendremos nuestro lightbox ligero hecho completamente mediante CSS. Se puede ver un ejemplo de su funcionamiento.