15 de novembro de 2012

Efeito Hover na Imagem Do blog

Oi gente  e Ayla ja esqueci isso Ok trago esse tutorial   super legal para vocês verem vamos lá?

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

Tutorial original por DPW, Sweet Poison

tchau gente beijos pesso que acessem  esse Blog Princesa com colete

Um comentário:

  1. O tuto ajudou muito ,continue fazendo tutoriais :3 Seu blog é lindo! Sucesso!

    rabiscos-em-paris.blogspot.com.br

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)