{Atualizado 1x} Efeito CSS3 - Moving

Olá candies, trouxe outro efeito css para vocês, são quatro formas diferentes, são muito úteis, vocês podem usar como blogs destaques :)

Visualize os resultados aqui.



Tutorial - Primeiro Efeito 

#upp {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/h6ymd2ydy/3.png) no-repeat bottom;
width: 200px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#upp:hover {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/h6ymd2ydy/3.png) no-repeat;
width: 200px;
height: 120px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

Mude o que está marcado, a imagem que usei é esta abaixo :

Edite Como Quiser

Para usa-lo:

<a href="Link" id="upp"></a><br>

Depois postarei os outros efeitos para não ficar aquele big post :)

Atualização 1x

Tutorial - Segundo Efeito

#dow {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/PkFmd2y6f/1.png) no-repeat;
width: 200px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#dow:hover {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/PkFmd2y6f/1.png) no-repeat;
width: 200px;
height: 120px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

 Mude o que está marcado, a imagem que usei é esta abaixo :




Para usa-lo:

<a href="Link" id="dow"></a><br>