15 de julho de 2013

Efeitos Hovers para imagens do blog

Olá pandinhas tudo bem?Trouxe um tutorial e como colocar efeitos hovers nas imagens do blog.Achei o tutorial lá no blog CHERRY BUBBLE   então creditos ao blog.
                                                          Veja os efeitos aqui                                                                                                                                                                                                                                                                                               No blogger, vá em:
Modelo ~~> Editar HTML ~~> Prosseguir ~~> De um CTRL + F e procure por: ]]></b:skin> 
  Acima da tag,cole o código do efeito escolhido por você.                                                                                                                                                                           
                                              
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;
}

Nenhum comentário:

Postar um comentário