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.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar