Imagem em efeito hover no blog

                        

Oiie meninas ando um pouco sumida fiquei sem internet por um tempo e não pude postar não pelo celular prometo me dedicar mais ao blog para que ele fique bastante bonito e legal né pra vocês curtirem bastante. mais, estou de volta com o tutorial de como colocar o efeito hover nas imagens com o novo modelo do HTML certo...vamos lá?

Disse-lhe Jesus: Eu sou o caminho, a verdade e a vida. ninguém vem ao PAI se não por mim. (João 14:6)
Vá no blog clique em modelo -> editar HTML -> aperte CRTL + F e procure por:
]]></b:skin>

Abaixo dele cole o efeito que preferir:

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

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

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

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

SATURATE:

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

HUE:

.main img {-webkit-filter: hue-rotate(0deg);   -moz-filter: hue-rotate(0deg);    -ms-filter: hue-rotate(0deg);     -o-filter: hue-rotate(0deg);filter: hue-rotate(0deg);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: hue-rotate(28deg);   -moz-filter: hue-rotate(28deg);    -ms-filter: hue-rotate(28deg);     -o-filter: hue-rotate(28deg);filter: hue-rotate(28deg);-webkit-transition-duration: .70s;}

CONTRAST:

.main img {-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: contrast(150%);   -moz-filter: contrast(150%);    -ms-filter: contrast(150%);     -o-filter: contrast(150%);filter: contrast(150%);-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;}

É isso meninas, qualquer duvida ou dificuldade com o tutorial so comentar,  espero ter ajudado sejam seguidoras beijos tchau

Créditos dos códigos: (www)