Imagens em efeito hover 2

06 junho 2013
               


                                                                 Foto: Imgfave
Oi!Tudo bem? (até parece que alguém vai me responder mas beleza)
Então como eu estou tão insperada em efeito nas fotos vim trazem mais alguns ou um kkkk
Ok o primeiro é um efeito zoom nas fotos .

Zoom

Créditos ao : Meninas online ¬¬




(Passe o mouse para ver o efeito)


Não é tão diferente dos outros dois que eu tinha feito .
Vá em Modelo>Editar HTML>Ctrl-f ou F3 e na barrinha de pesquisa procure ]]></b:skin>





Pronto? Então ACIMA desse código cole:

/* Efeito Zoom */ img.zoom {display:block; width:200px; -webkit-transition-duration: .3s; border:5px solid #EEE; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}
Salve. Fez? Agora quando for usar é só ir no HTML do post e colar:


<img src="URL DA IMAGEM " class="zoom">

Efeito grayscale



Créditos ao :Unicorn Paradise



Vá em Modelo>Editar HTML>Ctrl-f ou F3 e na barrinha de pesquisa procure ]]></b:skin>
E ACIMA cole:


                                
.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);}
Salve e visualize para ver se deu certo :D

Borrar



Créditos ao :Unicorn Paradise


                                

Vá em Modelo>Editar HTML>Ctrl-f ou F3 e na barrinha de pesquisa procure ]]></b:skin>


E ACIMA cole:

.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');}
Salve e visualize para ver se deu certo :D


Invert 



Créditos ao :Unicorn Paradise

                                      


Vá em Modelo>Editar HTML>Ctrl-f ou F3 e na barrinha de pesquisa procure ]]></b:skin>


E ACIMA cole:


img{ -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear } img:hover{-webkit-filter: invert(100%);z-index: -99px;}
Salve e visualize para ver se deu certo :D

Por hoje é só espero ter ajudado !
Logo mais volto com outros efeitos.
Fui-me
Comentários
0 Comentários

Nenhum comentário:

Postar um comentário

© Dilemas Indies - 2014. Todos os direitos reservados - Criado por: Bárbara Nascimento - Tecnologia do Blogger. imagem-logo