Visualización pop-up de una imagen con CSS

Muchas veces por cuestiones de espacio en nuestro sitio necesitamos mostrar imagenes pequeñas y para mostrarlas en su tamaño real podemos poner un link a una página nueva como hacen varios sistema de publicación como Blogger. La otra es usar un efecto de pop-up, es decir, una visualización del tamaño real sobre el contenido que puede mostrarse o no a gusto del usurio, como hace Lightbox JS con Javascript y ahora te mostraremos como hacerlo solamente con CSS (Ver ejemplo).

1. Con tu imagen tamaño real, crea una imagen más pequeña (thumbnail). Esto lo puedes hacer con cualquier software de edición de imagen como photoshop.
2. Lo siguiente es definir las clases que usaremos, aquí es importante tanto el tamaño de la imagen pequeña y la de tamaño real, ya que de estas depende la ubicación de la visualización de la imagen.

Escensialmente ocuparemos 3 clases:

#imagen
.img-link
.t-real

Las propiedades de las clases y subclases a utilizar con sus respectivas anotaciones, son las siguientes:

#imagen {
 background-color: #FFFFFF;
 position: relative;
 top: 10px;
 width: 100px;}

/*ocultamos la imagen tamaño real*/
#imagen a .t-real {
 width: 1px; /*dimensionamos a 1px de ancho */
 height: 1px; /*y 1px de alto */
 border: 0px;
 display: block;
 position: absolute; /*la posicionamos fuera de la parte visible de la pantalla */
 left: -1px;
 top: -1px;
}

/*quitamos el borde a las imagenes */
#imagen a img {
 border: 0;
}

/*propiedades del thumbnail */
#imagen a.img-link, #imagen a.img-link:visited {
 background: #FFFFFF;
 width: 100px; /*ancho imagen pequeña*/
 height: 100px; /*alto imagen pequeña*/
 border: 1px solid #000000;
 display: block;
 text-decoration: none;
}

#imagen a.img-link:hover {
 background-color: #000000;
 color: #000000;
 text-decoration: none;
}

/*mostramos imagen tamaño real */
#imagen a.img-link:hover .t-real {
 height: 300px; /*alto imagen tamaño real*/
 width: 300px; /*ancho imagen tamaño real*/
 border: 1px solid #000000; /*borde imagen tamaño real*/
 display: block;
 position: absolute;
 left: 125px; /*posición con relación al tamaño de la imagen pequeña thumbnail*/
 top: -60px; 

}

El funcionamiento en escencia de este “truco” es desaparecer la imagen tamaño real sacandola del área visible y hacerla aparecer colocando enfrente de la imagen pequeña.

3. Entonces, el código HTML para implementarla es el siguiente:

   <div id="imagen">
   <a class="img-link" href="#">
   <img src="http://tusitio.com/tu-imagen-pequeña.jpg" width="100px" height="100px"/>
   <img  src="http://tusitio.com/tu-imagen-tamaño-real.jpg" width="300px" height="300px" class="t-real"/>
   </a>
   </div>

   Es importante que observes la relación de tamaño de la imagen chica y real con respecto a las ubicaciones relativas en el código CSS.

Ver el ejemplo en funcionamiento.
Descargar el ejemplo.