11 novembro 2012

Efeitos hover para as imagens do blog

Oi gente! Tudo bem? Só vou fazer essa postagem porque estou viciada em um jogo chamado WoW, só que ele é do Brasil, ele é muito divertido!

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

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

GRAYSCALE

.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;
}
Créditos:(www)
Beijos.

Um comentário: