Efeito saturação em um grupo de imagens

Como eu já expliquei ontem, hoje (domingo) tenho uma prova, por isso programei a postagem. Estava muito a toa ontem (sábado) e resolvi escrever esse post logo. Estou escrevendo essas coisas entre parenteses porque programar postagens me confunde quanto a datas, mas para quem está lendo não faz diferença nenhuma. Por incrível que pareça estou conseguindo postar todo dia, isso porque nesse meio tempo meu outro blog está totalmente parado, tadinho. Sempre achei mais fácil postar aqui porque basta anotar o que postar e escrever uma postagem quando quiser. Simples. 

assim.

Recebi uma ask pedindo para ensinar esse efeito que eu uso na minha elite de afiliados e links externos. Esse efeito é aquele de "opacidade em um grupo de imagens", porém eu troquei completamente os códigos para que ele deixe a imagem com alto contraste quando passa o mouse, e as outras envolta dela fiquem em preto e branco. Sim, esse é o efeito que estou usando atualmente no blog, mas coloquei fiz uma preview caso eu troque de layout e alguém queira saber como é. Peço que por favor não rebloguem, e se usarem reservem um espacinho no espaço de créditos do blog de vocês. Todo blogueiro quer um pouco de reconhecimento, e eu acho que pedir um isso não é demais. certo? 

Live preview do efeito

1- No HTML do seu blog, procure por ]]></b:skin> Acima, cole:

#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);}

2- Em um Gadget de HTML/Javascript, cole:

<div id="parceirosca">

Código da sua imagem

</div>

Entendendo:

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

Esse é a saturação da imagem normalmente. Repare que as imagens são mais "cegantes" que o normal, mesmo parada. Você pode aumentar o número 1.5 para o que quiser, sendo que 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.

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

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 isso aparece.

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

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 a {
-webkit-filter: saturate(1);

Essa parte se refere 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:hover {
-webkit-filter: saturate(2);

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.

Espero que gostem do efeito e que o post seja útil. Expliquei tudo em detalhes para quem quiser aprender a mudar os valores nos códigos e fazer as coisas sozinho. Lembrando que isso só fica bom em imagens clarinhas e com cores fracas, então por favor tomem cuidado para não colocar em uma imagem com amarelos cegantes ou vermelho muito forte, tenha pena da visto dos leitores!

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar