ICONOS SOCIALES CON HOVER EN BLANCO Y NEGRO & COLOR

by Blogs Famag - agosto 01, 2019

ICONOS SOCIALES CON HOVER EN BLANCO Y NEGRO & COLOR.

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 en un Gadger 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.

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi466Ym-eLVy_Kpt4M1zGjqFfzkrqyNA_r1TP-EB-zT90VzfttgUFVyxbjL6DNra0ZBf2Pi1IWRF1GEHoniGjOzuMLI5l74hYyuo-nNvFbR2BeBT04RVPo-w5nr7KjbmEPZ5b7nAm8sl-Q/s1600/twitter.png" /></a>

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

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYvtGgO1URIY53bhOW-ZRGxQX_ftjA6hNfBOxZpBIKH6ivOJoCiie9RSTJOgV5EvzybdAfiCoiXTUVKpFQGiKbjttSxZ65CMfbIuivfy38JRPa3W45YgoJAXcrciZF5jA2P8ScU_tY0w/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZMqusyxe2v3u4Fy9qZDfO1MP_8EM8gQjMRI3VEvUbFZOetQvj9RymM5mqGbc0mOhR3dZIl3QWG2anV8VLKYNbCsdCUhOpPYckr1XGUb0075OIIi3zu4gIlL_Ubwgyx1pfY-cfKHSap8/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>

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi466Ym-eLVy_Kpt4M1zGjqFfzkrqyNA_r1TP-EB-zT90VzfttgUFVyxbjL6DNra0ZBf2Pi1IWRF1GEHoniGjOzuMLI5l74hYyuo-nNvFbR2BeBT04RVPo-w5nr7KjbmEPZ5b7nAm8sl-Q/s1600/twitter.png" /></a>

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

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYvtGgO1URIY53bhOW-ZRGxQX_ftjA6hNfBOxZpBIKH6ivOJoCiie9RSTJOgV5EvzybdAfiCoiXTUVKpFQGiKbjttSxZ65CMfbIuivfy38JRPa3W45YgoJAXcrciZF5jA2P8ScU_tY0w/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZMqusyxe2v3u4Fy9qZDfO1MP_8EM8gQjMRI3VEvUbFZOetQvj9RymM5mqGbc0mOhR3dZIl3QWG2anV8VLKYNbCsdCUhOpPYckr1XGUb0075OIIi3zu4gIlL_Ubwgyx1pfY-cfKHSap8/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>