Efecto mouse overWebsite CSS Globe publicó un interesante efecto mouse over en imágenes enlazadas.

Este permite aplicarle fácilmente una variedad de efectos. Es muy simple, elegante e ideal para mostrarle al usuario el significado de que hace una determinada sección del sitio.

Por ejemplo podemos hacer aparecer una lupa cuando el puntero del mouse pasa sobre la imagen para indicar que haciendo click esta se ampliará (zoom) o desplegar una leyenda que indique que se puede descargar.

Para incorporarlo a nuestra página debemos enlazar el archivo imagelink.js:

script src="imagelink/imagelink.js" type="text/javascript"

y configurar los parámetros: imageClass, defaultClass y overClass en el archivo Javascript.

También existe un segundo método un poco más complicado que permite configurar estilos diferentes en varias imágenes. Todo esto está bien explicado en el sitio (en inglés) y verdaderamente es muy sencillo de implementar.

Demo: cssglobe.com/lab/imagelink
Descargar Image Link
Artículo original:
Style Your Image Links (en inglés)

Vía: .etc

Tags: , , ,

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT