Efeitos nas Imagens das Postagens - Blog

Yoooo! Estou eu aqui de novo!! Como vocês estão eim?? Era pra minha pessoa ainda esta dormindo, estou MUITO cansada, mas não quero deixar o blog de lado e quis postar nele hoje!!

Se meu irmão (sim, eu tenho irmão)  não ficar no pc hoje a noite, vou ver se posto algo sobre anime, se isso não acontecer, eu posto amanha mesmo!

Os efeitos dão um toque de profissionalidade nas imagens e são bem simples de colocar, então sem mais enrolamento, Vamos Conferir?
Vá em seu HTML depois aperte Ctrl+ F e procure pelo código

  ]]></b:skin>  

Depois coloque a cima dele o código de sua preferência

Preto e Branco:

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

Blur:

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

Invert:

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

Brightness:

.main img {-webkit-filter: brightness(0.0);   -moz-filter: brightness(0.0);    -ms-filter: brightness(0.0);     -o-filter: brightness(0.0);filter: brightness(0.0);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: brightness(0.5);   -moz-filter: brightness(0.5);    -ms-filter: brightness(0.5);     -o-filter: brightness(0.5);filter: brightness(0.5);-webkit-transition-duration: .70s;}

Depois salve e veja se esta funcionando!

Créditos: ♥

Então é isso pessoal! Qualquer dúvida, deixe nos comentários.
Se você estiver usando algum efeito, não esqueça comentar e deixar o link do se blog, ficarei muito feliz!
Participem do blog, ♥.♥ Bezuuuuus e até mais!! Byebye ♥