16 de ago de 2013

Efeito opacidade em um grupo de imagens


Olá Anjos!

Trouxe um tutorial bem legal para vocês, que é o efeito na opacidade das imagens do blog. Esse efeito é do Kawaii World, e eu o usei no Template Blue Tiger, mas com o efeito invert (que é aquele que a imagem fica "negativa") no lugar da opacidade (apenas falando isso para vocês saberem que dá para trocar o efeito).

O nome ficou tosco mesmo, porque foi o melhor que consegui. O efeito é o seguinte: quando você passa o mouse em uma imagem, as que estão em volta ficam opacas. Entenderam?

1- Vá no HTML do seu blog, procure por ]]></b:skin> e acima, cole:

#parceiros {
opacity: .80;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
}
#parceiros:hover a {
opacity: .20;
}
#parceiros a {
opacity: .80;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
}
#parceiros a:hover {
opacity: .99;
}
2 - Em um Gadget de HTML/Javascript, cole:

<div id="parceiros">
Código das suas imagens
</div>

Lembrando que você pode trocar a opacidade por qualquer outro efeito, como o de preto e branco, etc.

4 comentários:

  1. Gosto muito desse tipo de efeito, mas não entendi o "invert" ç3ç Onde?

    ResponderExcluir
    Respostas
    1. A imagem fica com as cores invertidas, tipo negativo de fotos sabe? Tem um exemplo aqui http://blog-detestes001.blogspot.com.br/2013/01/coloracao-nas-imagens.html :3

      Excluir
  2. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH! EU SEMPRE QUIS ESSE TUTORIAL!!
    Um milhão de obrigados!! rs'

    ResponderExcluir
    Respostas
    1. eu sempre sendo útil -sqn ushaushuauhs'

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!