Efeito de saturação em um grupo de imagens

Hey How bunnie's! Hoje venho trazer um tutorial bem legal! Como aplicar efeito de saturação em um grupo de imagem. O efeito se constitui em todas as imagens estarem com o mesmo efeito, e ao passar o mouse sobre uma delas, a mesma se destaca enquanto as de mais mudam de efeito. Sabendo onde aplicar, fica um efeito muito profissional. Já o utilizei muito nos avatares de afiliados, caso queira ver o efeito basta clicar no link que estará um pouco mais abaixo. Se desejar aprender o tutorial basta continuar lendo. 

Brevia do efeito

1.Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa com o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole: 

Códigos

#parceirosca {
-webkit-filter: saturate(1.5);
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
#parceirosca:hover a {
-webkit-filter: saturate(0);
}
#parceirosca a {
-webkit-filter: saturate(1);
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
#parceirosca a:hover {
-webkit-filter: saturate(2);}

Salve!

2. Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

<div id="parceirosca">
Código da sua imagem
</div>

___________________(Entendendo o código)___________________

Essa parte do código é a saturação padrão da imagem. Pode se perceber que sozinha as imagens ficam mais cegantes que o normal. Você pode alterar a numeração 1.5 para qual desejar. Números maiores vão deixar a imagem com cores mais fortes, e números baixos com cores mais frias. Zero deixa preto e branco.

#parceirosca {
-webkit-filter: saturate(1.5);

Essa parte se refere a transição (tempo) que demora para o efeito acontecer. O mesmo vale para todas as partes do código que irão aparecer.

-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;

Esse código se refere as imagens que não estão com a seta por cima quando você passa o mouse. Ou seja, as imagens que "sobraram". O número zero deixa a imagem preto e branco. (Leia a explicação acima para entender a relação dos números)

#parceirosca:hover a {
-webkit-filter: saturate(0);

Essa parte se refere-se a imagem que você passou o mouse em cima, ou seja, aquela com a seta do mouse. O número um aumenta a saturação dela. Cuidado ao mexer nesses números e deixar a imagem cegante!

#parceirosca a {
-webkit-filter: saturate(1);

Essa parte se refere a imagem que está com o mouse em cima também, MAS esse código faz com que as cores da imagem fique mais forte em alguns segundos. Ou seja, esse é o código que a imagem vai ficar em definitivo, enquanto a seta estiver em cima dela. Se você quiser que as cores fiquem mais forte com o tempo, coloque um número menor que o do código acima, se quiser que fique mais fracas, coloque menor.

O código da sua elite é aquele <a href... etc. Coloque o todo ali dentro, ou o efeito não vai funcionar. E é claro, acho que já ficou mais que óbvio que só dá certo com uma imagem né? Usando a mesma lógica acima, você pode colocar o efeito que quiser, tanto de opacidade, quanto de contraste e etc.

#parceirosca a:hover {
-webkit-filter: saturate(2);

___________________(fim da explicação)___________________

É isso queridos! Espero que tenham gostado do efeito e da explicação. Os créditos do tutorial vão para o blog Chá com Anjos.