Tutorial: Cómo dar efecto blanco y negro a tus imágenes con CSS

¡Comparte el tutorial!

Tweet

Hoy te traigo otro bonito efecto para que lo agregues a tu blog o página web, se trata de un efecto que hace que tus imágenes se vean en blanco y negro, pero al pasar el cursor sobre ella sus colores originales vuelven.


Mira como dar efecto blanco y negro a tus imágenes con CSS aquí.

¿Que necesitamos?

* Un blog o página web.

Dificultad

Fácil

Paso 1:

Antes de pasar al código mira como queda el efecto:

Paso 2:

Ahora si, vamos al código.

Busca en tu plantilla la siguiente linea:

]]></b:skin>

Ahora pega este código antes de esa linea:

.separator {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: all 2s; -webkit-transition: all 2s; transition: all 2s; /* De Color a B/N */
}
.separator:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; /* De B/N a Color */

Puedes modificar el tiempo que tarda el efecto en devolver el color a la imagen y viceversa, para esto modifica las partes en color morado 1s= 1 segundo, 2s= 2 segundos, y así sucesivamente.

Y listo, guarda los cambios y observa el resultado.

Espero te haya gustado este bonito efecto, para darle un toque de diseño a tu blog.

Fin del tutorial