ICONOS HOVER A BLANCO Y NEGRO & VICEVERSA

By Blogs Famag - domingo, septiembre 01, 2019

ICONOS 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.

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

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

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>

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

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

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

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>

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