Imagem com efeito arco-iris

Hoii! Hoje vou ensinar um efeito legal e que ainda não é muito usado na blogosfera. É o efeito arco-iris nas imagens. A maioria das pessoas usam o efeito opacidade, então é bom variar um pouco e usar algo diferente, concordam? 

Efeito arco-iris na elite de afiliados:

Vá no HTML do seu blog, aperte CTRL+F e procure por:

]]></b:skin>

Acima disso, cole:

 .arcoiris {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);
}

Sempre que quiser usar o efeito, use o seguinte código:

 <a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="arcoiris" /></a>

Efeito arco-iris em todas as imagens do blog

Vá no seu HTML, aperte CTRL+F e procure por:

/* Posts--------------------

 ABAIXO disso, cole:

post img {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);}

Visualize, se estiver tudo certo, salve.

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