Imagen que Cambia el Color al Pasar el Mouse por Encima con Efecto de Desvanecimiento y jQuery

Cuisi de Devblab.Net nos muestra como poner un bonito efecto a nuetros íconos y imágenes, y es que al pasar el mouse por encima de un icono este se vuelve de otro color con un efecto de desvanecimiento, en la actualidad hay muchos efectos parecido o iguales hechos con distintos script y lenguajes de programación, pero en este caso utilizaremos jQuery. Puedes verlo en mi blog de pruebas.

Para llevar a cabo este efecto tienes que tener 2 imágenes, con el color original y otra convertida a escala de grises, para convertirla a escala de grises con Photoshop has lo siguiente "Imagen > Modo > Escala de grises", si usas Publisher en la barra de herramienta selecciona el icono "Color > y elije Escala de grises".

Ahora para llevar a cabo el efecto en un blog de blogger, primero nos aseguraremos de tener la librería jQuery en nuestra plantilla, es posible que la tengas, si la tienes salta este paso y si no la tienes pega el siguiente código justo antes de la etiqueta </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery-1.2.6.js' type='text/javascript'/>

Ahora añadiremos el script, justo despues del anterior código que acabamos de pegar antes de </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/fade-desvanecimiento.js' type='text/javascript'/>

Ahora añadiremos el código CSS para darle estilo, para ello copia el siguiente código y pegalo justo antes de la etiqueta ]]></b:skin>:

/* CSS efecto desvanecimiento*/
#rss{
width:150px;
height:150px;
margin:auto;
position:center;
display:block;}
#rss a{
background-image:url(url-de-tu-imagen-escala-de-grises);
background-repeat: no-repeat;
position:center;
display:block;
width:150px;
height:150px;
}
#rss span.hover{
width:150px;
height:150px;
background-image:url(url-de-tu-imagen-original);
background-repeat: no-repeat;
position:center;
display:block;
}

Por último tenemos que agregar el código HTML para llamar al efecto y al CSS, ve a Diseño > Añadir gadget > elije HTML/Jvascript y pega el siguiente código:

<div id="rss">
<a href="URL-de-tu-enlace" title="Nombre-de-tu-imagen"></a></div>

En el código CSS tienes que poner la url de tu imagen donde indíca se los dejo en color rojo.
Cambia lo que está en color azul por tu enlace y título de tu imagen.
También puedes ver un efecto de opacidad desvanecimiento para imágenes en un post del potro de ciudadblogger.

Vía  | Devblab.Net

Descargar Script