Hover a blanco y negro & viceversa

comentar

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="http://2.bp.blogspot.com/-KVx3pHuLjTU/UwJJ-nmXAKI/AAAAAAAAL0A/xZOdy-WSGbE/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="http://3.bp.blogspot.com/-PfEM3EjAsaY/UwJJwy7dKyI/AAAAAAAALz4/bSzCTvnPt70/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="http://3.bp.blogspot.com/-wlgJ5-sFi5Q/UwJKFJU3dsI/AAAAAAAAL0I/wMHiOkPcsMU/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="http://3.bp.blogspot.com/-jjhKe8yf2RE/UwJKKmPrxaI/AAAAAAAAL0Q/iwRG2fkix08/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="http://2.bp.blogspot.com/-KVx3pHuLjTU/UwJJ-nmXAKI/AAAAAAAAL0A/xZOdy-WSGbE/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="http://3.bp.blogspot.com/-PfEM3EjAsaY/UwJJwy7dKyI/AAAAAAAALz4/bSzCTvnPt70/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="http://3.bp.blogspot.com/-wlgJ5-sFi5Q/UwJKFJU3dsI/AAAAAAAAL0I/wMHiOkPcsMU/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="http://3.bp.blogspot.com/-jjhKe8yf2RE/UwJKKmPrxaI/AAAAAAAAL0Q/iwRG2fkix08/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>