Galeria de afiliados e parceiros com efeito Opacity

Hoje vou disponibilizar no goodies mais um efeito para criar uma galeria de parceiros ou afiliados com efeito. Aprendi este efeito com bordas quadriculadas e como sempre gosto de modificar os códigos e deixa-los bem fofos desmembrei boa parte do código original e o deixei com este estilo, espero que gostem do novo resultado ^^...beijinhos!

Espero que gostem viu, aki não deu pra mim por certi o efeito

mas o efeito ao passar o mouse sera que todas as outras imagens ficaram brancas e a que vcs escolheu virara uma bolinha espero que gostem

                                                   

-------------------------------------------------------------------------------------
Copie o código abaixo  , cole antes de ]]></b:skin>

.afiliados img{-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;; width: 50px; }
.afiliados:hover img {-webkit-transition-duration: .45s; opacity: 0.20; }
.afiliados img:hover {-webkit-transition-duration: .45s; opacity: 1.0;

border:2px dashed #DB7093;
-webkit-transition: 0.5s;
-webkit-border-radius: 15px;
-moz-border-radius: 35px;
border-radius: 35px;} 

-------------------------------------------------------------------------------------
Agora copie o código abaixo  e cole em HTML/Java Script.

<center><div class="afiliados">

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/9.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/195.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/219.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/232.png"></a>



    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/164.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/117.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/133.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/118.png"></a>



    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/108.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/207.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/236.png"></a>

    <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
    <img src="http://i111.photobucket.com/albums/n159/docedani/fanlisting/52.png" ></a>

    </div></center>