14 novembro 2012

Efeitos hover nas imagens



1. No Blogger, vá em Modelo> Editar HTML.
2. Clique em 'Prosseguir'. Tecle Ctrl F e procure por:
]]></b:skin>
3. Logo acima dessa tag, cole um dos códigos abaixo:
BLUR

.post img {
-webkit-filter: blur(0px);
   -moz-filter: blur(0px);
    -ms-filter: blur(0px);
     -o-filter: blur(0px);
filter: blur(0px);
-webkit-transition-duration: .70s;
}
.post 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;
}

GRAYSCALE

.post img {
-webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
     -o-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition-duration: .70s;
}
.post 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

.post img {
-webkit-filter: sepia(0%);
   -moz-filter: sepia(0%);
    -ms-filter: sepia(0%);
     -o-filter: sepia(0%);
filter: sepia(0%);
-webkit-transition-duration: .70s;
}
.post 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

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

.post img {
-webkit-transition-duration: .70s;
}
.post 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

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

.post img {
-webkit-transition-duration: .70s;
}
.post 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 -> Eu usso!

.post img {
-webkit-filter: invert(0%);
   -moz-filter: invert(0%);
    -ms-filter: invert(0%);
     -o-filter: invert(0%);
filter: invert(0%);
-webkit-transition-duration: .70s;
}
.post 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;
}

Espero que gostem e usem algum efeito, este efeito só é mostrado nas imagens do post mas se quiseres em todas substitui .post img { por  img {
.post img:hover {  por img:hover {

2 comentários:

  1. O sepia é o mas interessante na minha opnião!
    Amei o Post
    Como coloca o houve que a gente passa o mouse na imagem ai a imagem tipo muda pra outra?

    ResponderEliminar
  2. Obrigada, acho que este post te pode ajudar?
    http://mundobibastico.blogspot.com/2012/06/blog-post.html

    ResponderEliminar