Efeito Transition

Tô trazendo para vocês um efeito bem manero do CSS3 que é exatamente o efeito de transição, esse efeito serve de mudança de ação ao passar o mouse (hover), veja o exemplo:


Passe o mouse sobre a Imagem


Você pode colocar o transition em links, imagens e etc. Para isso basta adicionar o Código abaixo no :HOVER do CSS do seu template.

-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
transition: all 0.5s ease;
Você pode alteras o tempo de transição, para isso modifique o "0.5" que é equivalente a meio segundo e coloque qualquer valor como por exemplo "1".

Exemplo de Código CSS:

#transition {width:45px;height:50px;}
#transition:hover {width:85px;height:90px;-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;transition: all 0.5s ease;}

Para por o efeito bastar por o ID dentro da imagem ou link, exemplo:

<img id="transition" src="http://i761.photobucket.com/albums/xx259/Baddyo/Untitled-3.png">

Caso você queira por a imagem ou texto movem para esquerda basta adiconar um padding-left:10px; ao CSS :hover >> #transition:hover .

Inove e ivente novas formas de usar o Transition, até a próxima e qualquer dúvida deixar comentário!