quinta-feira, 23 de agosto de 2012

Efeito Zoom


Vou ensinar vocês a como colocar um efeito zoom nas imagens (afiliados, equipe) onde você quizer, esse efeito fica muito legal e interessante.Espero que vocês gostem do tutorial.
~ Resultado ~
Para usar esse efeito zoom, você deve ir em Design → Editar HTML
Tecle F3 ou Ctrl+F e procure por:
]]></b:skin>
Quando achar esse codigo, cole esse outro antes.
.Zoom na imagem {
width: 50px; height: 50px; /* Tamanho normal */
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}
.Zoom:hover {
border: 1px solid #ddd;
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060; /* Cor da Sombra */
-webkit-transition-duration:1.0s;
width: 90px; height: 90px; /* Tamanho quando aumentar */
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
}

Agora você pode modificar da forma como você achar melhor.

Nenhum comentário:

Postar um comentário

quinta-feira, 23 de agosto de 2012

Efeito Zoom


Vou ensinar vocês a como colocar um efeito zoom nas imagens (afiliados, equipe) onde você quizer, esse efeito fica muito legal e interessante.Espero que vocês gostem do tutorial.
~ Resultado ~
Para usar esse efeito zoom, você deve ir em Design → Editar HTML
Tecle F3 ou Ctrl+F e procure por:
]]></b:skin>
Quando achar esse codigo, cole esse outro antes.
.Zoom na imagem {
width: 50px; height: 50px; /* Tamanho normal */
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}
.Zoom:hover {
border: 1px solid #ddd;
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060; /* Cor da Sombra */
-webkit-transition-duration:1.0s;
width: 90px; height: 90px; /* Tamanho quando aumentar */
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
}

Agora você pode modificar da forma como você achar melhor.

Nenhum comentário:

Postar um comentário