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