12/07/2012

TUTORIAL AFILIADOS COM EFEITO ZOOM


Esse tuto é muito maneiro e mega lindinho,irei usar no nosso  próximo lay.
Agora cliquem em leia mais...






Vejam como é:





Enjoy ~ 



1. 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.

2. Na sua elite, use o seguinte código:



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

Prontinho (: 

Nenhum comentário:

Postar um comentário