A veces vemos una imagen y no sabemos si se puede ampliar o no, corremos el riesgo de descargarla sin querer… ¿No sería mejor avisar a los usuarios de que se puede ampliar haciendo que se muestre un icono de zoom cuando pasamos el ratón por dicha imagen? Pues con CSS puede hacerse, el proceso es muy sencillo. (También se puede hacer con JQuery, al final del artículo se enunciará, pero nosotros vamos a enfocarnos en la manera CSS).

Con CSS:

Una manera sencilla de lograr este efecto es con CSS. Si nos fijamos en el código HTML tenemos una etiqueta <span> vacía, que hay que mantenerla. Este es el código HTML al completo:

Código HTML

<div id="gallery1">
<h2>CSS solution</h2>
<a href="3029990904_d10cc4fd9d_o.jpg">
<span></span>
<img src="3029990904_6fc619349d_m.jpg" alt="" />
</a>
<a href="3036302292_d37001ed77_o.jpg">
<span></span>
<img src="3036302292_61f44a917c_m.jpg" alt="" />
</a>
</div>

El truco está en tener posicionado <span> como absolute en el link con posicionamiento relativo. ‘Span’ tiene una imagen de fondo que será tu icono. El ancho y alto del ‘Span’ debe coincidir con el ancho y alto de tu icono de zoom. Puedes cambiar la localización del icono, pudiendolo cambiar a top/bottom/left/right.

Código CSS:

#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery1 img { border: solid 1px #999; padding:5px;}
#gallery1 a:hover span { display:block;}

‘Span’ estará invisible hasta que movamos el cursor encima de la imagen (a:hover).

Estandarización

XHTML 1.0 Transitional inválido (etiqueta <span></span> sin incluir contenido).

CSS 2.1 válido.

Ejemplo de su funcionamiento

Ver un ejemplo de su funcionamiento. (Tanto si hemos usado CSS como JQuery para aplicar este efecto de zoom).

Con JQuery:

Ver el artículo de Janko hasta encontrar  “JQuery way”.

Vía | Janko at warp speed

Compartir/Guardar