Como Fazer Imagens Girar ou Ampliar ao Passar o Mouse

NIVEL DE DIFICULDADE - MÉDIO
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.


Código CSS para Girar ou Ampliar Imagens
             

                 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.

caso você não saiba colocar esse estilo no seu blog, vá em modelo - em seguida personalizar - avancado - role a barrinha ate o final e escolha a opção adicionar CSS e cole o codigo , em seguida clique para visualizar o seu blog para ver como ficou ok...

Nenhum comentário:

Related Posts Plugin for WordPress, Blogger...