Efeito confused

Okaeri, meus origamis. Acho que ultimamente me tenho apaixonado por códigos >.< 

Enfim, o que trago hoje não é nenhum efeito original, mas eu gostei dele. Misturei o efeito "moderadoras" com "afiliados numa só imagem", e ainda acrescentei alterações na coloração, sépia e saturação da imagem. Não deu nada muito especial, devido a essa grande mistura, chamei-lhe confused. Então, mesmo que não dê para entender muito bem aqui, cá vai a prévia - lembrando que as imagens rodam antes de ficaram em hover, e em conjunto, fica muito bonito (ao contrário do que mostra o gif). Na verdade, o efeito está nos meus afiliados, mas para o caso de eu mudar de lay ou assim, convém deixar aqui, né?

Prévia (www):

Tutorial:

Abra o seu HTML e use Ctrl + F para procurar por:

/b:skin

Acima dessa tag, cole todo o código abaixo:

.confused { /*dados da imagem - para fazer afiliados numa só imagem, reduzi a border-bottom e right*/

width: 105px; 

height: 42px;

margin-bottom: -4px;

margin-right: -4px;

text-align: center;

}

.confused:hover { /*repetição do primeiro código, mas em hover*/

width: 105px; 

height: 42px;

margin-bottom: -4px;

margin-right: -4px;

text-align: center;

}

.efeito img { /*dimensões da imagem*/

width: 105px; 

height: 42px;

-webkit-transition-duration: .45s;

}

.efeito:hover img { /*imagens em hover - as que não estão com o rato*/

-webkit-transition-duration: .45s; 

-webkit-transform: rotate(360deg); 

-webkit-filter: sepia(0.3) hue-rotate(350deg) saturate(1);

opacity: 0.50;

}

.efeito img:hover { /*o que muda ao passar o rato*/

-webkit-transition-duration: .45s; 

opacity: 1.0;

}

Parece complicado, não? Mas não é assim tanto. As únicas coisas que você deve trocar são as dimensões da imagem, e se entender bem dos filtros, pode mudar a sépia, saturação e cor. A cor é mudada principalmente no valor que diz 350. Agora, sobre como usar...

Para aplicar, basta colar num gadget o código seguinte:

<div class="efeito">

<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>

<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>

<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>

</div>

Repita a parte que diz <a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a> as vezes que precisar, lembrando que tem de ser antes de fechar o </div>

Funcionou bem? Se você aplicou direitinho, sim :) Como já disse, não é nada original, apenas outra mistura de códigos. Ja nee ^^