25 de mar de 2012

Efeito Opacidade Hover nas imagens


Sim, esse é mais um tutorial de opacidade que eu trouxe para noooooooossa alegriaaaa (clique aqui), mas não acho que seja um tutorial qualquer. Recebi um pedido para mostrar como fazia o efeito das imagens aqui no blog e sinceramente eu não fazia a menor ideia até mesmo porque não fui eu quem fez o layout.  Mas consegui descobrir graças ao Crazy in HTML e ao Drinhoh (carinha que fez o layout do blog), por isso todos os créditos vão para ele. Bom, tudo explicado, comecemos o post.

No painel principal do blog clique em desing>editar html feito isso tecle Ctrl+f e procure por:
]]></b:skin> 
Achou? Agora ACIMA dessa tag cole o código abaixo:

/*---Efeito Opacidade / Crazyinhtml.blogspot.com---*/
.post img {
 -moz-opacity:0.60; opacity:0.60;/* Opacidade da imagem */
-webkit-transition-duration: 2s; /* Tempo de mudação de uma imagem para outra */
}
.post img:hover {
-moz-opacity:1.0; opacity:1.0;
}
.sidebar img {
 -moz-opacity:0.60; opacity:0.60;/* Opacidade da imagem */
-webkit-transition-duration: 2s;
}
/*---Fim do código / Don't Plagio---*/


Prontinho? Antes de salvar dê uma visualizada para ver se está do jeitinho que vc quer, se estiver é só clicar naquele botão laranja (super discreto) escrito salvar modelo e pronto.

12 comentários:

  1. Mary amei o tutorial :) adoro tutos assim :* beijinhos

    ResponderExcluir
  2. Parece ser bem simples mesmo e o efeito é bem legal!

    Bjinhos ;*

    Pâm
    http://chiqueatodaprova.blogspot.com.br/

    ResponderExcluir
  3. Ah que legal, adorei vou tentar (:

    http://www.byjessicarodrigues.com

    beijos

    ResponderExcluir
  4. Nunca pôs o efeito nas imagens em meu blog, mas conheço e fica muito bom! :)

    World-cutest.tk

    ResponderExcluir
  5. Eu nunca coloquei lá no blog tipo assim pq eu faço algumas imagens pras meninas e tals então acho que não combina mais eu acho super fashion kkkkkkk ^^


    BEIJÃO AMORE! ianapaulinhaaaa.blogspot.com.br

    ResponderExcluir
  6. Fica um efeito lindo, já usei no blog :)
    http://www.senhoritaliberdade.com/

    ResponderExcluir
  7. acho que vou aplicar no blog é tão lindo o efeito *o*

    ResponderExcluir
  8. Amei esse efeito fica muito bom *-*
    Estamos com elite de afiliados aberta se você se interessar entre no meu blog.
    http://thingsofteenagerblog.blogspot.com.br/

    ResponderExcluir
  9. Fica muito legal, mas nem uso...
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  10. Oii , sou eu o ex dono do crazy agr tou com novo blog viss visita e segue ele :D
    http://things-to-you.blogspot.com.br/
    drinhoh

    ResponderExcluir
  11. Obrigada mesmo, já estava procurando por esse efeito e até que enfim encontrei o seu blog. Muito obrigado mesmo. Mais sucesso... ♥

    ResponderExcluir