Tutorial : Imagem colorida a hover

Ooooi princesinhas tudo bem com vocês ? eu to ótima ( ninguém pergunto ) 

Bom hoje eu to trazendo para vocês um tutorial que aprendi aqui então todos os créditos a ela

é um tutorial muito legal e deixa o blog super fofo então

sem mais enrolação vamos ao tutorial ??

(clique em leia mais e continue lendo )

Esse tuto que estou trazendo é de como deixar a imagem colorida quando passa o mouse em cima ok... 

Que é o efeito que estou usando no meu blog , passa o mouse ai em cima de qualquer imagem para vocês verem

primeiro para depois fazer , por que vai ser meio chato se vocês fizerem algo e não gostarem primeiro

eu aconselho vocês a fazer esse tuto em um blog de teste primeiro , e salvar um modelo do seu template antes 

caso aja algum probleminha e vocês não conseguirem arrumar ok 

Um exemplo para vocês  clique pra ampliar 

É super mega simples vamos aprender 

Editar HTML > f3 > e procure por :

]]></b:skin>

Antes da tag que você acho você vai colar esse código abaixo : 

img {
filter: hue-rotate(360deg);
border-radius: 5px;  /* Bordas aredondadas apague se não quiser */
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 1.0s linear; /* Duração do efeito */
-moz-transition: all 1.0s linear;  /* Duração do efeito */
transition: all 1.0s linear;}  /* Duração do efeito */
img:hover {
border-radius: 15px;  /* Bordas aredondadas a hover apague se não quiser */
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);
} 

Bom o código já diz oque deve ser feito ok , só mude as borda e a duração do efeito

ao menos que você seja algum " ninja do HTML" kkkk

é isso espero que tenham gostado , big beijo e fiquem com Deus