26 de out de 2012

Imagens com Zoom Scale


Hoi! 
Trouxe um tutorial que aprendi no Kawaii World, é um efeito nas imagens que ela aumenta quando passa o mouse. Ótimas para elite de afiliados.
Veja um Preview aqui.

Para usar na elite:


1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

.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: #7536A5;
padding: 3px;
}
.elitescale:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #9100FF;
padding: 4px;
}

Entendendo o código:

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
Bordas arredondadas, que é dada em pixels. Aumente o número 2 caso queira que ela fique mais redonda, diminua ou coloque 0, caso não queira borda arredondada.


-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
Tempo que demora para a imagem aumentar de tamanho. Modifique apenas se tem conhecimento em HTML.

 background-color: #7536A5; 
Cor da borda sem o mouse. Mude o que está depois do jogo da velha.

padding: 3px;
Tamanho da borda sem o mouse em cima. Modifique apenas o número 3.

-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
Quanto a imagem vai crescer. Mude apenas se tem conhecimento em HTML.

 background-color: #9100FF; 
Cor da borda quando passa o mouse.

 padding: 4px;
Tamanho da borda quando passa o mouse

2- Para usar em apenas uma imagem, cole o seguinte código:

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

Para usar em todas as imagens do blog:

 1- Vá no HTML do seu blog, aperte CTRL+F e procure por:


/* Posts
----------------------------------------------- */


2- ABAIXO disso, cole:
.post img {
-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: #7536A5;
padding: 3px;
}
.post img:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #9100FF;
padding: 4px;
}
As propriedades é a mesma explicada acima. Lembrando que se você colocar em todas as imagens do blog, as que não tem fundo ficaram com o fundo igual a cor escolhida para a borda das imagens.



6 comentários:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!