Tumblr_mir6hwpmci1rntdp2o1_500_large
Haay, *-* como vão?

Bom, antes de tudo, peguei os tipos de efeitos pras imagens no Annyz, então os créditos vão pra ele . Clicando em leia mais vocês veem os exemplos de como a imagem fica normal e hover e os tutoriais.
Todos os códigos você cola acima de ]]></b:skin> , visualiza e salva.
Efeito Sépia 
Código:
.post-body img {filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}.post-body img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}
Efeito grayscale

Código:

.post img{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .post img:hover{-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}

Efeito borrar

Código:

.post-body img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .post-body img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
Efeito invert

Código:
img{ -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear } img:hover{-webkit-filter: invert(100%);z-index: -99px;}

0 comentários:

Postar um comentário

 
Top