Poner una Lupa a todas las Imágenes del Blog al pasar el Mouse por encima con CSS y jQuery

En Pixelco hacen referencia a un interesante efecto mouse over en imágenes enlazadas, el cual después de barios intentos fallidos por no contar con el código CSS para poner el efecto en funcionamiento, el código css que utilizaré para este post es de uno de los ejemplo que nos da el creador de este script Elen's de cssglobe, que bien dice en su post que podemos utilizar el estilo de alguno de los demos, pues yo he tomado el estilo de uno.

El efecto que les mostraré en este post, es muy simple, elegante y es que cuando un usuario pase el mouse sobre una imagen aparecerá una lupa indicando que dicha imagen se pueda ampliar (zoom) o que contiene un enlace. Si quieres saber más acerca de este script puedes encontrar más inforamción aquí. Puedes verlo en mi blog de puebas.

Para ponerlo en nuestro blog primero tenemos que tener la librería jQuery, es posible que la tengas en tu plantilla, si no la tienes copia y pega el siguiente código justo antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/>

Ahora añadimos el script justo después del código que acabas de pegar antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/imagelink.js' type='text/javascript'/>

Ahora sólo nos queda añadir el estilo, para ello copia y pega el siguiente código justo antes de ]]></b:skin>:

/* Lupa en imagenes */

.imageOver{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRB0WfGHmQUJhdZs7gIyJxM1FZb6PgKIaj6LQeTGmsmuAt2ZWec4BgoZ5QW0Wc_L0gFJOS_yz9hai1ElDi5mzB65MieW1acEw6c1wbbGHr0-OdzzKmbcaFqaHneFxNf_vrwANhBEyYrto/s320/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Cambia lo que está en color rojo por la URL de tu imagen.

Descargar Script