Efeito para imagens

You are my love Venus ~ Mesmo que eu já poste em dois tumblrs de icons, eu criei um novinho ontem de madrugada junto com o Renan, será que podiam seguir e pedir? q Enfim, como anda a vida de vocês? Hoje é aniversário do meu pai, mas ele só fará uma festa (churrasco+alguns amigos q) no sábado, então hoje nem foi um dia comemorativo, mesma coisa de sempre = eu e o pai na internet e a mãe trabalhando.  wee n

Como eu queria postar um tutorial ou algo do tipo, eu vim hoje com um efeito para imagens do blog. Eu fiz ele uma vez quando eu estava fazendo um layout que não deu certo, então agora eu estou tentando refazê-lo para postar o efeito - bem simples - para vocês.  Quando você não passa o mouse, existe uma borda dupla em todo o canto da imagem, e depois quando você passa a imagem gira 360 graus e fica p&b.

(Veja a prévia aqui.) Para usar, copie o código abaixo e depois cole-o acima do trecho ]]></b:skin>. Acho que a única coisa a ser alterada é a cor da borda e a altura e a largura no hover (width/ height: 99px;).

.img{ border: 3px double #f7deda; transition:width 1.6s, height 1s, transform 1.6s; -webkit-transition:width 2s, height 2s, -webkit-transform 2s; }

.img:hover{ border: 3px solid #f7deda; transform:rotate(360deg); width: 99px; height: 99px; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; -webkit-filter: saturate(0%) ;-webkit-transform:rotate(360deg);}

Agora, para o efeito aparecer vá no lugar que quer que apareça (em um gadget de HTML, geralmente) e cole o código presente no blockquote abaixo. Não se esqueça de editar a URL da imagem, o título e o link. ~

<center><a href="link" title="titulo"><img src="URL DA IMAGEM" class="img"/></a>

<a href="link" title="titulo"><img src="URL DA IMAGEM" class="img"/></a>

<a href="link" title="titulo"><img src="URL DA IMAGEM" class="img"/></a>

<a href="link" title="titulo"><img src="URL DA IMAGEM" class="img"/></a></center>

ALIÁS, NÃO PAREM DE LER! Como o texto do blockquote daqui do blog é maiúsculo, na hora de copiar e colar no seu blog ele ficará maiúsculo também, infelizmente. Então, para quem quiser a letra MINÚSCULA, selecione o código do blockquote, clique com o botão direito e depois selecione inspecionar elemento. Uma linha estará destacada, então clique nas reticências (...) contidas nele. O código que estava contido no blockquote aparecerá, então com o botão direito selecione EDIT TEXT.  Não edite o texto, somente copie-o. 

Veja o procedimento nesse gif aqui.