domingo, 15 de julho de 2012

Imagens giratórias com efeito zoom no post do blog

Hooy Gurias! Hoje eu vou disponibilizar pra vocês um efeito super legal, na verdade vim aqui apenas pra isso. Sabem tá um dia tão lindo lá fora *--* me recuso ficar em casa (risos). 


No meu blog de testes vocês puderam visualizar e entender melhor o efeito, certo? Aaah sem esquecer de citar a fonte ''Códigos blogger, o seu blog do seu jeito''.

Lembrando que o objetivo do JD não é copiar ninguém e sim disponibilizar os melhores goodies e dicas para melhorar o seu blog. Caso algum não seja de minha autoria sempre citarei os devidos créditos (:
Vá no seu HTML, dê um CTRL +F e na caixa de pesquisa que apareceu pesquise por: ]]></b:skin>

e ACIMA dela acrescente os seguintes códigos 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);
}



Visualize, se estiver todo ok salve! Fácil né? 
Espero que tenham gostado <3

p.s vou responder os comentários hoje à noite ou amanhã (:
Bye Bye

67 comentários :

  1. Eu não gostei,eu amei :i:
    Beeijos :)

    Dreams-of-imagine.blogspot.com

    ResponderExcluir
  2. O efeito é legal, porém acho muito "chamativo" para as imagens do post, faz muito auê rs
    Jackie, queria pedir sua opinião sobre o tema "Têm idade certa pra se maquiar" falando sobre a vaidade precoce de algumas meninas e ... basicamente sobre o mundo "maquiado" que no cerca rs
    È pra um próximo post em meu blog, bem, se você aceitar poderia enviar para o e-mail- maitemamor@hotmail.com

    Beijinhos,Maitê
    pinkcatsflashpug.blogspot.com.br

    ResponderExcluir
  3. oi! como esta?
    que postagem legal não conhecia esta efeito!
    AMO DESENHOS DISNEY ta em festa!!!
    vem participar????

    ResponderExcluir
  4. Beem legal ameei o tutorial s2

    Beijos.Gabi.

    opedecoelho.blogspot.com.br

    ResponderExcluir
  5. Curti muito o tuto!
    http://ladyalen.blogspot.com

    ResponderExcluir
  6. Adorei as imagens girando HAHA' muito legal isso :D
    :l:

    ResponderExcluir
  7. Muiiito útiil o efeito!!!
    O blog ta MARA!!!!

    bjoooos,Aniinha

    do-ladodeca.blogspot.com

    ResponderExcluir
  8. Muito útil o tutorial, esse efeito fica lindo no blog *-*

    Bjão

    http://fannydream.blogspot.com

    ResponderExcluir
  9. Vistem o blog está com tutorial de make
    www.vaidosassantana.blogspot.com

    E não esqueçam de seguir ;D

    ResponderExcluir
  10. É bem interessante não conhecia esse efeito ainda!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  11. OMG! Me apaixonei pelo efeito *-*
    Estou repaginando meu blog e queria mesmo tutoriais incríveis! Aqui como sempre o melhor blog, com goodies perfeitos ><
    Beijos gataa, te espero lá!

    www.soentreamigas15.blogspot.com

    ResponderExcluir
  12. Lindo esse efeito, super show!
    Amei!
    Beijos
    @maihferreira

    http://ithecloset.blogspot.com

    ResponderExcluir
  13. wowww! estilo "do a barrel row" do google kkkk
    Bem legal o efeito,particularmente prefiro em icones, imagens pequenas kkk se não posso tontear hahahah

    bjãoo Jackie

    ResponderExcluir
  14. Alerta: o efeito não é recomendado pra quem tem labirintite X.X ... Ok,confesso que fiquei brincando com as imagens aqui *-*

    ResponderExcluir
  15. Gostei do efeito, uso um parecido, as imagens do post são giratórias e os afiliados tem zoom, só que quando eu fiz o modelo não tinha tutoriais, ai eu tive que mudar o código do tumblr e tals.

    Seguindo, segue de volta?
    Aliás, poderia me ajudar? É só ir no meu blog e clicar no banner acima dos posts. Agradeço desde já
    http://blogjust-a-girl.blogspot.com

    ResponderExcluir
  16. Ain, muito lindjo o efeito! E essa primeira foto? É você com suas amigas? (incluindo a Rafa?) Que fofaaaa! -.* kkkkkk As outras fotos também ficaram lindas! Beijo,
    bibiworldfun.blogspot.com

    ResponderExcluir
  17. :k: Amei ,muito bom =)

    ResponderExcluir
  18. Olá,desculpa encomodar,é que meu blog foi hackeado hoje,e gostaria de contar com a sua ajuda para reerge-lo,te espero por lá.Muito obg desde já!

    http://cupcakegoodies.blogspot.com.br/

    ResponderExcluir
  19. Adorei o tutorial Jackie, bem explicado e util *-* http://confissoesdeumablogueira.blogspot.com.br/

    ResponderExcluir
  20. Amei o efeito! Ficou demais, Jackie ;)
    Bjs -> imnanda.blogspot.com

    ResponderExcluir
  21. UAU ~Amei o tuto flor. E o novo lay tá maravilhoso, parabéns! Seu blog é muito útil, seu blog me ajuda muito, e aposto que muitas pessoas fazem seus blogs com a sua ajuda. Continue assim! Beijos

    sonhos-de-um-adolescente.blogspot.com

    ResponderExcluir
  22. Ah que demais esse efeito.. *o*

    AH e parabéns pelas fotos.. Muito lindas.. :)

    Beijos Guriia... Tem que aproveitar o dia mesmoo..

    ResponderExcluir
  23. Amei :k:, eu já vi esse tuto em outro blog, acho esse efeito bem legal para um blog, nota 10000 como sempre nas postagens jackie. beijos. Estou seguindo.
    Rafasinha.blogspot.com.br

    ResponderExcluir
  24. Oi Jackie adorei tudo por aqui
    Altas dicas fiquei encantada com o design do blog e a quantidade de posts bacanas que encontrei por aqui.
    Parabéns, sucesso viu! =D
    Bjs,Tali
    My Sinapse

    ResponderExcluir
  25. Esse efeito é bem legal. Adorei o tutorial.
    http://startdreamy.net.tc

    ResponderExcluir
  26. Hooy Jackie, realmente esse efeito é muito legal.
    Infelizmente não pegou no meu blog.
    Tem Vota Dogs no meu blog, vota lá.
    Espero seu voto. E sua foto na galeria ficou linda minha diwa.

    Kissus

    sooscachorrinhos.blogspot.com

    ResponderExcluir
  27. Ótimo tutu! Adoreei <3
    Amore, faz um tutu de como fazer esse efeito que tu fez no gadget de "galeria de fotos"?! Queria fazer o mesmo, só que com os banners das empresas parceiras..
    Agradeço desde já!
    Bezoos s2

    ResponderExcluir
  28. Gostei do efeito bem legal.
    As fotos também sao lindas.
    Beijos.

    ResponderExcluir
  29. Jackie VC PODE FAZER POR FAVOR UM TUTORIAL COMO DEIXAR AS IMAGENS TRANSPARENTE
    PORRRRRR FAVORRRRR :i:

    ResponderExcluir
  30. Amei jackie , ja os coloquei em meu blog ,
    bezzos

    http://sweettsecretsofagirl.blogspot.com.br/

    ResponderExcluir
  31. Jackie agora pra mim seus gadjets estão muito melhores =) obrigada por aceitar a dica bjokas.
    http://xicablog.tk/
    e eu que pensava que vc se tinha chateado comigo XD

    ResponderExcluir
  32. Amei o tutorial,Jackie.Muito legal e criativo.
    Fofa,será que posso posta-lo mo meu blog?Dando créditos a você,claro!
    Beijos!

    http://mundoencantadodabarbie.blogspot.com/

    ResponderExcluir
  33. Esse tuto é ótimo, só não coloco no meu blog porque acho que fica muito "pesado" :/
    Não canso de ver esse seu lay lindo *o*

    # >>> candycherry-official.blogspot.com

    ResponderExcluir
  34. Ameiiiiiii...
    Te adoorooo !!
    Visite meu blog http://vaidoosas.blogspot.com.br/

    ResponderExcluir
  35. Oii como você personalizou suas categorias?? Poderia me ajudar fazendo esse tuto, ou mandando pelo contato do meu blog: candyces.blogpost.com

    ResponderExcluir
  36. Nossa!ele é super legal e interessante e facil,adorei!Jackie você sabe como transformar uma imagem quadrada para as pontas arredondadas!
    Obrigada,Giovanna!
    http://brilhants.blogspot.com.br/

    ResponderExcluir
  37. Jackie, acho que esse blog plagiou seu layout antigo: http://brilhants.blogspot.com.br OOu slá, ta MUITO parecido O-O

    ResponderExcluir
  38. Legaal demaais esse tutorial, gostei muito Jackie!
    beeeeijos;*
    http://sooulteen.blogspot.com.br/

    ResponderExcluir
  39. Oi! Passei aqui para avisar que estou pegando o banner do Jackie Dreams para colocar como parcerias,tá?Você vai encontrá-lo na página ''Sobre'',bjs
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  40. kkkkkk que maluco! Bem legal... eu gosto de um efeito... 'shake' se não me engano... não consigo achar por nada! Enfim, vou ver o que posso inventar com o codigo. Otimo tutorial como sempre ^^
    beijos
    lisoeenrolado.tk

    ResponderExcluir
  41. @Catharine Vasqueshttp://isjackiezzdream.blogspot.com.br/2011/06/deixando-imagem-com-fundo-transparente.html

    (:

    ResponderExcluir
  42. Aiiiw Jackie :k: só vc! Estou arrumando meu blog e precisava mesmo desse tuto! :3. Mas só uma dúvida: também dá pra colocar na elite de afiliados? Eu estou doidiinha pra colocar tbm!
    Kissus :l:

    ResponderExcluir
  43. Nao consegui!!!!!!!!!!! consegui por em um dos meus trabalhos,mas nesse eu não consigo!!! por favor me ajude! www.camila-brothers.blogspot.com

    ResponderExcluir
  44. Amei de verdade esse tutorial! obrigada!!! :D

    http://lovelyartesanatosbymay.blogspot.com.br/

    ResponderExcluir
  45. Adorei o tutorial!! Obrigada! ^^

    http://lovelyartesanatosbymay.blogspot.com.br/

    ResponderExcluir
  46. Eu simplismente ameeeeeeeeeeeeeeeeeeeeei Lindu,Lindu,Linduu' eu amo seu blog' Titorias tudo, Vc manda super-hiper-mega bem! Parabéns

    ResponderExcluir
  47. Amore, pode postar um tuto dele para a area dos posts, so que quando clicar?

    ResponderExcluir
  48. @Maju ? Não entendi bem o seu pedido linda!

    Já que esse tutu é para a area de posts e funciona apenas quando clicar (:

    ResponderExcluir
  49. @Anônimo tente alterar os números que estão seguidos de px

    ResponderExcluir
  50. Como a Maitê Amorim disse, talvez fique um pouco chamativo demais. Não tem como fazer adaptações pra colocar o efeito nas imagens dos afiliados não?

    ResponderExcluir
    Respostas
    1. Nem precisa, pq já tem efeitos parecidos para os afiliados (:

      Excluir
  51. Brigada *---*

    eu uso o modelo viagem (:

    ResponderExcluir
  52. Hooy, adorei seu blog sempre venho fazer uma visitinha aqui rs' os posts e os tutoriais são ótimos que o seu blog continue fazendo sucesso bjs!

    http://demicogumelo.blogspot.com.br/

    ResponderExcluir
  53. Chateada... Acho que só eu não consegui :(

    ResponderExcluir
  54. jakie, pra quem usa o novo modelo do blog, tem q ir em designer de modelo, na aba avançado em adicionar CSS .. (*o* eu não sabia disso kk e tive q descobrir sozinha *o* )
    coloquei esse feito no blog, da uma olhadinha: http://maniadeallstar.blogspot.com.br/
    *-*

    ResponderExcluir
  55. muiitooo legal jackie , ameii !

    http://lovedreamsonhodeamor.blogspot.com.br/

    ResponderExcluir
  56. Amei o efeito!Muito legal flor!!Bjoos!!

    ResponderExcluir

.