Hover a blanco y negro & viceversa

Utilizando los filtros del CSS3 podemos obtener este efecto, en el que al pasar el cursor por cualquier imagen, esta cambia de color a blanco y negro o tambien a la inversa. Para que veais un ejemplo, os he puesto estos 4 maravillosos iconos sociales de diseño propio con su codigo correspondiente por si os gustan y quereis añadirlos a vuestro blog. Solamente teneis que copiarlo y pegarlo alli donde querais mostrarlo, sustituyendo lo que esta en color azul por las direcciones URLs de vuestras cuentas en las redes sociales y la de vuestro feed RSS. Esta tecnica la podeis utilizar con cualquier imagen, cambiando la direccion (en gris) por la que estimeis oportuno. Si quereis, tambien podeis descargaros los iconos y los codigos.

descargar

ver codigo

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UV5VXc7mqz2oaIMi_QIJ9ExPSl25ja0iPQb9mnYXNBdQsTjLDrrq2wxEjSEw8D97MlWNj_-SjIXyAeGZdQtVVze6zzsqkUVz_oBkdCXwH_sfQXpFZeSpOQnNCzDovEHzWztdn9pdpMc/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznOze3FVoL7BDOb4lK43opjtVrHL6Pxed5sveluSpj1RMMizvbKew7XVaBfc-p8_45pRIXUjhAvPu0YrRWP8EGRuNS69KGi0knXS8SpcUOLZNl0v8NTmCVzA093lrIYo7qzYtyvvp5OY/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKZnvp3OpGuHNlyHmVpYTLbS6Oc8IZf6qrXqoAVJ_-JPdVuiLC-PpOP1kKO3U2qHfxmed6vXzWjOPdClVehDH5sd9gEMt4nuW74-vLE_fuZ-uxZVibKxfVprQJzsCb2sNoCsnhJGrU1o/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjx8eHXg1l1l-FMRSz6b92oVWTPIm_rG-3ytbu-nreEO6n3QWakP12Kc3vacDsRD1_tOUT-o0btDW5c7Jf4TWY-52CBHKqbcoTjXBnDAjRHIHfItAj2C3tYQofjQl1clTwWegCLom4c4/s1600/feedrss.png" /></a></div></div>

<style>
.blancoynegro img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>

ver codigo

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UV5VXc7mqz2oaIMi_QIJ9ExPSl25ja0iPQb9mnYXNBdQsTjLDrrq2wxEjSEw8D97MlWNj_-SjIXyAeGZdQtVVze6zzsqkUVz_oBkdCXwH_sfQXpFZeSpOQnNCzDovEHzWztdn9pdpMc/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznOze3FVoL7BDOb4lK43opjtVrHL6Pxed5sveluSpj1RMMizvbKew7XVaBfc-p8_45pRIXUjhAvPu0YrRWP8EGRuNS69KGi0knXS8SpcUOLZNl0v8NTmCVzA093lrIYo7qzYtyvvp5OY/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKZnvp3OpGuHNlyHmVpYTLbS6Oc8IZf6qrXqoAVJ_-JPdVuiLC-PpOP1kKO3U2qHfxmed6vXzWjOPdClVehDH5sd9gEMt4nuW74-vLE_fuZ-uxZVibKxfVprQJzsCb2sNoCsnhJGrU1o/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjx8eHXg1l1l-FMRSz6b92oVWTPIm_rG-3ytbu-nreEO6n3QWakP12Kc3vacDsRD1_tOUT-o0btDW5c7Jf4TWY-52CBHKqbcoTjXBnDAjRHIHfItAj2C3tYQofjQl1clTwWegCLom4c4/s1600/feedrss.png" /></a></div></div>

<style>
.blancoynegro img {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>