Efeito - Magic

Boa noite leitores lindos :3

Desculpem pela hora da postagem, mas é que eu estava fazendo minha lição de casa e acabei dormindo em cima do meu caderno e só acordei agora e ainda não terminei a lição, mas eu vou faltar amanhã mesmo, então tanto faz u3u Ah, só avisando Bia-Chan, talvez eu não possa postar no sábado, vou visitar meu primo que está com pneumonia :c

Como eu acordei agorinha, fiquei com medo de ir preparar utilitários e acabar postando muito tarde, já que sou extremamente lerda para fazer este tipo de coisa, então, acabei pegando um efeito que eu postei no meu blog ontem. Eu mesma que fiz, então creditem por favor.

Preview 

Para utilizar, procure pela tag  ]]></b:skin>

Dica: Com o novo modelo do blogger, muitas pessoas não estão conseguindo achar esta tag. Tente procurar somente por ]] e ir tentando achar o restante da tag (:

Quando achar a tag, acima dela, cole:

.magic{

border: 4px solid #f1f1f1;

transition:All 1s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-webkit-transition-duration: .50s;

}

.magic:hover{

transform: rotate(0deg) scale(0.67) skew(0deg) translate(0px);

-webkit-transform: rotate(0deg) scale(0.67) skew(0deg) translate(0px);

-moz-transform: rotate(0deg) scale(0.67) skew(0deg) translate(0px);

-o-transform: rotate(0deg) scale(0.67) skew(0deg) translate(0px);

-ms-transform: rotate(0deg) scale(0.67) skew(0deg) translate(0px);

-webkit-transition-duration: .50s;

} 

Se quiser  a borda de outra cor, mude #f1f1f1 por outro hexadecimal. 

Se não quiser a borda, apague a linha "border: 4px solid #f1f1f1;"

Para utilizar o efeito, cole o código abaixo em um gadget de Html/JavaScript:

<a href="LINK"title='TEXTO'><img class="magic" src="IMAGEM" /></a> 

Complete com os links necessários e salve! Repita o código quantas vezes necessário (: