6 de set de 2012

Efeito zoom e imagens giratórias nos posts do blogger

Olá caros amigos! Hoje eu vou disponibilizar pra vocês um efeito muito legal que faz com que as imagens que você escolher, girem e dêem um zoom quando o mouse é passado sobre elas.
Lembrando que o objetivo do IN4MAL não é copiar ninguém, mas, disponibilizar os melhores códigos e dicas para melhorar o seu blog. Caso algum não seja de minha autoria sempre citarei os devidos créditos.


No blog de testes do blog Jackie Dream, vocês puderam visualizar e entender melhor o efeito, certo?

1° - Vá no seu HTML, ( dê um CTRL +F ) e na caixa de pesquisa que apareceu pesquise por: ]]>/b:skin>  e, ACIMA dela acrescente o seguinte código CSS:


.post-body img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}

.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}

Fonte: Códigos blogger/ Jackie Dream
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

4 comentários

  1. Ha, ficou demais. Adorei o efeito, mas se as imagens estiverem juntas, dá um pouco de impressão pois a imagem com zoom fica por cima dela, mas de resto, está d+!

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo