Transições animadas em fotos/imagens

Vamos a mais um tutorial?! Nesse vamos aprender a colocar transições animadas em imagens quando passamos o mouse sobre ela.



Veja os exemplos aqui.

Viram? Legal né! Agora vou lhes passar os códigos por nome de efeito:

• Efeito Grow
• Efeito Shrink
• Efeito Sidepan
• Efeito Vertpan
• Efeito Tilt
• Efeito Morph
• Efeito Focus
• Efeito Blur
• Efeito B&W
• Efeito Brighten

Você vai escolher o efeito desejado. Depois do banner, o arquivo vai baixar automaticamente em seu computador e abrir com bloco de notas. O código que abrirá você vai colocar em seu CSS/style de seu theme. Cada código tem o nome de sua div de acordo com o efeito.

Agora vamos adicionar o efeito na imagem escolhida.

Digamos que escolhi a div "shrink". Eu irei adicionar esse código abaixo onde a imagem irá ficar:

 <div class="shrink">
    <img src="LINK_DA_SUA_IMAGEM" alt="">
  </div>

Lembrando que se eu escolher a div "blur" devo trocar o nome da div ali em cima, onde tem o "shrink" e assim vale para qualquer div que eu escolher.

Resumindo, você deve colocar o nome da sua div escolhida no lugar do "shrink" e adicionar o link de sua imagem onde pede.

Qualquer dúvida, avise nos comentários. Beijinhos!