Efeito: Colors On!+ Imagens- Fairy Tail

Yo minna!
Sei que sumi mas não foi minha culpa TT^TT
Eu tive que ficar duas semanas sem internet porque minha mãe viajou, então não tive onde mexer já que na minha vó não tem computador e nesse período sem internet nunca vi minha mente tão fértil! Até consegui dar um nome descente no efeito que trouxe para vocês ^∪^
Enfim, aposto que muitas pessoas sabem usar esse efeito (ou não), mas o que eu trouxe foi mais uma ideia para usar principalmente nos afiliados. É um efeito hover preto e branco que quando passa o mouse fica na cor original, daí o nome Colors On!
Vamos ver como se faz GO GO GO!

♥

Para visualizar o efeito clique aqui para manjar dos paranauê. Ainda não sei porque não troquei esse nome ridículo.

A ideia é deixar cada imagem usada formando uma imagem inteira, mas se quiser pode usar outras imagens. Enfim, prepare suas imagens e hospede-as num site.

Agora vá em Editar HTML e cole depois de ]]></b:skin> esse código:

.colorson {
width: 0px; *largura da imagem*
height: 0px; *altura da imagem*
padding:0px;
-webkit-transition:  0.7s ease-out;
-moz-transition:
 0.7s ease-out;
transition: 0.7s ease-out;
-webkit-filter: saturate(0%) ;
}
.colorson:hover {
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-filter: saturate(50%) ;
}

Troque apenas a largura e altura da imagem para o tamanho da sua.
Depois  salve e vá em Layout→ Adicionar gadget→ HTML/ JS e cole esse código fazendo as alterações necessárias.

<a href="LINK" title="TÍTULO DO LINK"><img src="LINK DA IMAGEM" class="colorson" /></a>

E aqui está as imagens para usarem no efeito (≧∪≦) 

Miniaturas 60x144

Miniaturas 100x100

Miniaturas 50x70

É isso minna!

Sayonara õ//