Tutorial - Efeito Percy {Exclusivo}

Oi, gente linda ●△●
Eu demorei mas cheguei e vocês perceberam o layout novo? É provisório até eu terminar o "definitivo". Não aguentava mais aquele layout, e fiquei numa de "Não vou postar até terminar o layout novo" Só não pensei que demoraria tanto. :( Então decidi criar um efeito simples pra vocês, só pra dar uma descontraída. O nome do efeito é Efeito Percy por ser lentinho e ficar mais parado tentando entender o que acontece ao seu redor. ahahahahah Vamos ao tutorial?

1. Vá em ]]></b:skin e cole o seguinte código acima da tag:

.EfeitoPercy{
transition:All 0.8274s ease;
-webkit-transition:All 0.8274s ease;
-moz-transition:All 0.8274s ease;
-o-transition:All 0.8274s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
border-top: 3px solid #D4E7E9;
border-right: 3px solid #D4E7E9;
border-left: 3px solid #D4E7E9;
border-bottom: 3px solid #D4E7E9;
}
.EfeitoPercy:hover{
transform: rotate(8deg) scale(0.791) skew(0deg) translate(13px);
-webkit-transform: rotate(8deg) scale(0.791) skew(0deg) translate(13px);
-moz-transform: rotate(8deg) scale(0.791) skew(0deg) translate(13px);
-o-transform: rotate(8deg) scale(0.791) skew(0deg) translate(13px);
-ms-transform: rotate(8deg) scale(0.791) skew(0deg) translate(13px);
border-top: 3px solid #6F93AA;
border-right: 3px solid #6F93AA;
border-left: 3px solid #6F93AA;
border-bottom: 3px solid #6F93AA;
}

Modifique apenas as partes destacadas pela cor que desejar na bordinha.
2. Agora é só adicionar um gadget/HTML e colocar esse códigozinho:

<a href="URL" title="NOMEAQUI"><img src="URLDAIMAGEM" class="EfeitoPercy" /></a>

Espero que gostem e creditem, ele é simplesinho, não chama muita atenção e combina em qualquer tipo de layout. É isso pessoal, até a próxima! ❤