De aquí 
a aquí 
con un movimiento muy suave.
Podemos hacer tantas redes sociales como queramos, las imagenes las podemos hacer en photoshop y las subimos a la carpeta imagenes del servidor donde esta alojada la página web.
en la pagina principal creamos un div para que contenga nuestras redes sociales.
<div id="social"> </div>
Dentro de ese div escribiremos los enlaces de cada red social i la ruta para encontrar su respectiva imagen. Le daremos una clase diferente a todos ellos.
Para que se abran los enlaces en otra pagina escribiremos : target=”_blank”
<div id="social">
<ul>
<li>
<a href="https://twitter.com/t0nyi" target="_blank" class="twitter">
<img src="images/twitter.png">
</a>
</li>
<li>
<a href="http://es.pinterest.com/tantequera/" target="_blank" class="pinterest">
<img src="images/pinterest.png">
</a>
</li>
<li>
<a href="https://www.facebook.com/tonyi.antequera"target="_blank" class="facebook">
<img src="images/facebook.png">
</a>
</li>
<li>
<a href="http://instagram.com/t0nyi/"target="_blank" class="instagram">
<img src="images/instagram.png">
</a>
</li>
<li>
<a href="https://www.linkedin.com/pub/tonyi-antequera/86/1b4/948"target="_blank" class="linkedin">
<img src="images/linkedin.png">
</a>
</li>
</ul>
</div>
Situaremos las imágenes en orden, una debajo de la otra. de esta manera:
Sólo se ve el icono, así cuando pasemos por encima se desplazaran i podremos leer el texto. Para poder colocar las imagenes de esta forma es preferible hacerlo dandoles la propiedad absolute i marcándole los puntos exactos de donde tienen que ir.
(-webkit-transition:all 1s; este atributo sera el que hará el movimiento mas alegre)
#social a.facebook{
position: absolute;
top: 90px;
left: 0px;
-webkit-transition:all 1s;
}
Así para todas.
Pasamos al movimiento, para que la imagen se mueva cuando pasamos el raton por encima escribiremos lo siguiente en el CCS:
#social a.twitter:hover{
left:120px;
}
Así para todas.
y ya lo tenemos