Efeito - Zoom Reverse (Exclusivo)

Boa tarde, seus lindos u_u

Estou um pouco estressada com um anônimo que foi na minha ask fazer confusão, mas acho que ele foi lá só para tentar me fazer desistir do meu blog, mas isso nunca vai acontecer, nunca mesmo! Ele, o anônimo, me xingou com vários palavrões e também ofendeu meu blog, somente pelo fato dele querer postar no meu blog, e ele não ter vagas, e também por não gostar do meu layout. Eu acho que isto não é motivo para vir xingando alguém... mas vocês não tem nada a ver com isso né? Então, vamos ao tutorial :3

Trouxe para vocês hoje um efeito que eu fiz exclusivamente para postar aqui no Cookie Lovers, pra não ficar aquela repetição de postagens aqui no CL e no meu blog, não é? Eu gostei bastante dele, ele é muito fofo, porém simples. Espero que gostem e que usem, mas não esqueçam dos créditos ao Cookie Lovers (:

Preview /Segundo Gadget

Procure por ]] e quando achar a tag ]]></b:skin> cole abaixo dela o código abaixo:

.Zoom {

border: 4px solid #f1f1f1;

border-radius: 1000px;

transition:All 1s linear;

-webkit-transition:All 1s linear;

-moz-transition:All 1s linear;

-o-transition:All 1s linear;

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

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

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

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

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

-webkit-transition-duration: .50s;

}

.Zoom:hover{

border-radius: 0px;

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

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

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

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

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

-webkit-transition-duration: .50s;

}

Edite a cor da borda na linha destacada, mas se não quiser a borda, retire a linha.

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

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