Tutorial - Efeito na opacidade das imagens

 

Yoo!

Temos aqui outro tutorial, também correspondente ao template do blog.  Dessa vez irei ensinar a fazer aquele efeito na opacidade da minha elite. Ao passar o mouse em uma das imagens, todas as outras ficam mais claras.

É o mesmo conceito usado naqueles gadgets onde ao passar o mouse sobre uma opção, as outras desaparecem e é fácil de fazer.

Espero que gostem.

1. Procure por ]]></b:skin> e acima da tag, 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, use o seguinte código para onde deseja aplicar:

<div id="parceiros">

COLOQUE SEU CÓDIGO NORMALMENTE

</div>

Prontinho!