Cuatro efectos en imágenes

Hey babies! ¿Os hacéis una idea de lo difícil que me está resultando hacer entradas estas últimas semanas/meses? No sé si es que estoy pasando por un burnout, el calor que está haciendo estos días (y los que faltan ahora que llega el verano) o qué es, pero es una lucha constante en mi mente para hacer las entradas, no es que esté desanimada con el blog, de hecho tengo algunas ideas que me parecen interesantes, pero darle a Nueva Entrada últimamente es un suplicio, sobre todo porque terminan todas en borradores... ¿vosotros cómo superáis estas épocas extrañas? Igual es que estoy en un mood más procrastinador de lo normal, yo que sé yo. I hate it!. Igual hago una reestructuración del blog para ver si mi estado anímico sube, pero bueno... ya veré qué hago.

En fin, después de mi desahogo personal, vengo con un tutorial cuádruple porque son cuatro efectos que se les pueden aplicar a las imágenes de todo nuestro blog. Todos son personalizables a vuestro gusto.

Como siempre, vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y justo encima colocamos el código del efecto que nos interese:

Blanco y negro

.main img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition-duration: .70s;
}

Desenfoque

.main img { -webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
-webkit-transition-duration: .70s;
}

Sepia

.main img {
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
filter: sepia(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition-duration: .70s;
}

Invertido

.main img {
-webkit-filter: invert(0%);
-moz-filter: invert(0%);
-ms-filter: invert(0%);
-o-filter: invert(0%);
filter: invert(0%);
-webkit-transition-duration: .70s;
}

.main img:hover {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%)
;filter: invert(100%);
-webkit-transition-duration: .70s;
}