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 {
E .post img:hover { por img:hover {
O sepia é o mas interessante na minha opnião!
ResponderEliminarAmei o Post
Como coloca o houve que a gente passa o mouse na imagem ai a imagem tipo muda pra outra?
Obrigada, acho que este post te pode ajudar?
ResponderEliminarhttp://mundobibastico.blogspot.com/2012/06/blog-post.html