Como Fazer Imagens Girar ou Ampliar ao Passar o Mouse
Veja como colocar fazer as imagens ou fotos do seu blog girar e ampliar quando passar o mouse sobre elas. Esse efeito em CSS para imagens funciona separadamente, ou seja, você pode escolher se quer que as imagens girem ou só aumentem de tamanho ao passar o mouse.
Para girar e ampliar nas imagens das postagens do seu blog precisamos colocar esse código CSS no HTML do Blog:
.post img {padding:20px}
.post img:hover{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;transition: all 1s ease;-moz-transform: scale(1.2) rotate(-720deg) ;-webkit-transform: scale(1.2) rotate(-720deg) ;-o-transform: scale(1.2) rotate(-720deg) ;-ms-transform: scale(1.2) rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);}
Se quiser fazer funcionar em todas as imagens do blog apague o trecho .post. Ainda é possível aplicar o efeito em um gadget especifico como por exemplo as Postagens Populares no Blog. Veja mais detalhes aqui: Como Editar Gadgets no Blog
Esses efeitos em imagens com CSS têm varias possibilidades de personalização vejam o que faz cada trecho do código, você encontrará varias vezes o mesmo código então altere todos usando o mesmo valor:
all 1s ease: 1s é a velocidade do efeito, então você pode alterar o numero 1 inclusive usando números decimais por exemplo: 0.7s.
-720deg: rotação da imagem. O sinal de menos no inicio mostra a direção da rotação, ou seja se quiser girar para o outro lado apague o sinal. O numero 720 são os graus de rotação que você pode modificar como quiser, mas lembre-se que 360 é uma volta completa, ou seja se usar 180 a imagem vai girar e parar invertida.
scale(1.2): altera o Tamanho das Imagens. Lembre-se que isso é um múltiplo ou seja se colocar 2 a imagem ficará com o dobro do tamanho original.
.post img {padding:20px}: essa parte é fundamental e você deve fazer diversos testes para ajustar o valor 20 que é a margem ao redor da imagem. Justamente pela imagem girar e aumentar de tamanho talvez ela fique por cima ou por baixo do seu texto, menu do blog ou qualquer outra coisa. Então conforme o efeito que usar altere o numero 20 para dar espaço suficiente ao redor da imagem.
Veja aqui alguns outros efeitos com CSS para usar no seu blog e atrair mais atenção dos seus visitantes:
Como Fazer Efeitos em Fotos e Imagens do Blog com CSS
Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Menu Horizontal com Efeitos no Blogger usando CSS
Esperamos que gostem desta dica sobre efeitos em imagens usando CSS e consiga criar efeitos legais nas fotos do seu blog. Abraços e Sucesso!
Código CSS para Girar ou Ampliar Imagens
Para girar e ampliar nas imagens das postagens do seu blog precisamos colocar esse código CSS no HTML do Blog:
.post img {padding:20px}
.post img:hover{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;transition: all 1s ease;-moz-transform: scale(1.2) rotate(-720deg) ;-webkit-transform: scale(1.2) rotate(-720deg) ;-o-transform: scale(1.2) rotate(-720deg) ;-ms-transform: scale(1.2) rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);}
Se quiser fazer funcionar em todas as imagens do blog apague o trecho .post. Ainda é possível aplicar o efeito em um gadget especifico como por exemplo as Postagens Populares no Blog. Veja mais detalhes aqui: Como Editar Gadgets no Blog
Passe o Mouse para ver a Demonstração
Como Funciona o Efeito Girar e Ampliar Imagens
Esses efeitos em imagens com CSS têm varias possibilidades de personalização vejam o que faz cada trecho do código, você encontrará varias vezes o mesmo código então altere todos usando o mesmo valor:
all 1s ease: 1s é a velocidade do efeito, então você pode alterar o numero 1 inclusive usando números decimais por exemplo: 0.7s.
-720deg: rotação da imagem. O sinal de menos no inicio mostra a direção da rotação, ou seja se quiser girar para o outro lado apague o sinal. O numero 720 são os graus de rotação que você pode modificar como quiser, mas lembre-se que 360 é uma volta completa, ou seja se usar 180 a imagem vai girar e parar invertida.
scale(1.2): altera o Tamanho das Imagens. Lembre-se que isso é um múltiplo ou seja se colocar 2 a imagem ficará com o dobro do tamanho original.
.post img {padding:20px}: essa parte é fundamental e você deve fazer diversos testes para ajustar o valor 20 que é a margem ao redor da imagem. Justamente pela imagem girar e aumentar de tamanho talvez ela fique por cima ou por baixo do seu texto, menu do blog ou qualquer outra coisa. Então conforme o efeito que usar altere o numero 20 para dar espaço suficiente ao redor da imagem.
Veja aqui alguns outros efeitos com CSS para usar no seu blog e atrair mais atenção dos seus visitantes:
Como Fazer Efeitos em Fotos e Imagens do Blog com CSS
Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Menu Horizontal com Efeitos no Blogger usando CSS
Esperamos que gostem desta dica sobre efeitos em imagens usando CSS e consiga criar efeitos legais nas fotos do seu blog. Abraços e Sucesso!