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:


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)
Resultado da Montagem

9 comentários:

  1. isso acontece quando passa o mouse ? ou fica fixa na imagem ? °‿°

    ResponderExcluir
  2. Pode reblogar ? amei este post vou escolher um efeito para colocar no meu próximo layout *-*

    xoxo ~ nerds-girl.blogspot.com.br

    ResponderExcluir
  3. Vou reblogar alguns efeitos e os créditos vão estar nas postagens flor .
    Acho que não tem problema não é mesmo ? se tiver me avisa lá no blog que eu excluo as postagens.

    kawaii-unlike.blogspot.com.br

    ResponderExcluir
  4. Meu blog me visita http://gtarockstarevolution.blogspot.com.br/

    ResponderExcluir

REGRAS:

✖ Proibido xingar, insultar
✖ Faça criticas construtivas
✖ Siga, Comente e divulgue
✖ Não plagie as postagens, pegar algum post Credite
✖ Comente sobre o assunto do blog, e no final do comentário coloque o link do seu blog, que eu visitarei e seguirei.