Hoooola a todos!
Voy a enseñaros cómo hacer este efecto B&N y que al pasar el cursor vuelve a sus colores originales 
¡Comencemos!


 ~Código~
Después de </head>, pegamos el siguiente código:

<*div style="width:0;height:0;"><*svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><*filter id="grayscale"><*/filter><*/svg><*/div>


PD: Después de copiarlo, quítale los asteriscos antes de cada <. Los puse porque no me dejaba añadirlo a la entrada.


~Para aplicarlo a sólo una imagen~

Antes de </head>, pegamos el siguiente código:

.grises img{filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-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;
}
.grises 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;
}


Luego, donde quieras insertar la imagen con efecto, coloca este código:

<*div class="grises">
<*img src="URL_IMAGEN" /><*/div>

PD: Después de copiarlo, quítale los asteriscos antes de cada <. Los puse porque no me dejaba añadirlo a la entrada.

~Para aplicarlo a todas las imágenes del blog~
Antes de </head>, pegamos el siguiente código:

.img {
filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-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;
}
.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;
}

Con sólo colocarlo, ¡todas las imágenes cambiarán automáticamente a blanco y negro!

~Variaciones: En color y el hover en B&N~
Antes de </head>, pegamos el siguiente código:

.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;}

.img:hover {filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-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;
}
Con sólo colocarlo, al pasar el cursor se verá la transformación a B&N.
Besitos a Ghaaby para ayudarla con los codes!

ラベル: