Afiliados com efeito zoom!

Nesse tutorial vocês vão aprender a deixar seus afiliados com efeito de zoom e com hover nas bordas que aprendi no Kawaii World e já uso há um tempão aqui no blog. Lets go?

     
Primeiro vá em editar html e com  f3 (ou ctrl+f) procure por  ]]></b:skin> e acima dele cole :

.elitescale{ -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-transition: 0s linear; -webkit-transition: opacity 0.5s linear; -webkit-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; background-color: #e7a5de;  padding: 3px; } .elitescale:hover { -webkit-transform: scale(1.20); -moz-transform: scale(1.20); background-color: #c4a6cb;  padding: 3px; }

Entendendo o código :

-moz-border-radius: 2px;

-webkit-border-radius: 2px;
Aumento o número se quiser que a borda fique ainda mais arredondada.
-webkit-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;
Aumente se quiser que demore mais até a imagem aumentar.
background-color: #e7a5de;
Cor da borda sem o mouse por cima.
-webkit-transform: scale(1.20); -moz-transform: scale(1.20);
O quanto a imagem vai crescer. Aumente se quiser que ela fique maior ainda ou diminua se quiser algo mais sutil.
background-color: #c4a6cb;
Cor da borda com o mouse por cima.
padding: 3px;
Nota-se que existem dois desses dentro do código. O primeiro define o tamanho da borda sem o mouse e o segundo com.
Essa parte acima do entendendo o código foi totalmente copiada.                          Visualize, se estiver tudo certo salve!
Agora em um gadget/html cole o código abaixo :

<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>

Acho que já para entender o código acima então tchauzinho!