Efeito zoom e imagens giratórias nos posts do blogger

Olá caros amigos! Hoje eu vou disponibilizar pra vocês um efeito muito legal que faz com que as imagens que você escolher, girem e dêem um zoom quando o mouse é passado sobre elas.

Lembrando que o objetivo do IN4MAL não é copiar ninguém, mas, disponibilizar os melhores códigos e dicas para melhorar o seu blog. Caso algum não seja de minha autoria sempre citarei os devidos créditos.

Demonstração do efeito

No blog de testes do blog Jackie Dream, vocês puderam visualizar e entender melhor o efeito, certo?

1° - Vá no seu HTML, ( dê um CTRL +F ) e na caixa de pesquisa que apareceu pesquise por: ]]>/b:skin>  e, ACIMA dela acrescente o seguinte código CSS:

.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);

}

Fonte: Códigos blogger/ Jackie Dream

Share This :