Zoom para suas imagens!

Olá, gente!

Outro dia a fofa da Bel do Intrépida me perguntou como eu fiz o efeito "zoom" nas fotos das postagens no blog e hoje decidi postar o tutorial pra todas vocês fazerem também e valorizar suas fotos no blog! é super simples, mas ele é um efeito duplo em que você pode escolher zoom rotatório (a imagem vai girar e ampliar) e apenas zoom como as fotos daqui do blog... Vamos lá!

-Vá até o HTML* do seu blog, clique em "Expandir modelos de widgets", dê ctrl + F e pesquise por ]]></b:skin> e acima cole o seguinte código CSS:

Obs: este código é para o efeito zoom rotatório

.post-body img {

z-index:999999;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

}

.post-body img:hover{

z-index:9999;

-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);

-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);

-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);

}

Para o efeito zoom igual o do meu blog cole este:

.post-body img {

z-index:999999;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);

}

.post-body img:hover{

z-index:9999;

-webkit-transform: rotate(0deg) scale(1.302) skew(0deg) translate(7px);

-moz-transform: rotate(0deg) scale(1.302) skew(0deg) translate(7px);

-o-transform: rotate(0deg) scale(1.302) skew(0deg) translate(7px);

}

Clique em visualizar e se tiver tudo certinho como você quer é só clicar em salvar!

É super simples e ainda destaca suas imagens dos posts!

O Tutorial do zoom rotatório eu encontrei no blog Jackie Dream e a modificação para "apenas zoom" eu fiz.

*nunca se esqueça de antes de editar qualquer coisa no HTML fazer um backup do modelo do seu blog,ok!

Foto: Isabela Moraes

Beijinhos, Isa.