Ayuda con este código JavaScript

Hola, pues llevo buscando un buen rato un código bien simple pero no lo encuentro, no sé por qué palabras buscar ya y por eso el pedir ayuda a ver..

El código es para que un par de imágenes de redes sociales que tengo en una esquina de mi página web, se oculte la mitad o el porcentaje indicado y al pasar el ratón por encima salga entera, algo así como lo tienen en esta página pero más simple, ni recuadro ni nada.

cine gratis, torrents, peliculas gratis, descargar peliculas, torrent

Agradezco toda ayuda, un saludo.

se puede hacer simple con css, o con jquery; mira esto

CSS3 Transition

:hover{
margin-right:100px;
}

SLDS

Con Jquery podes usar este codigo

$(function()
{
$('#navigation > li').hover
(
function () {$('a',$(this)).stop().animate({'marginLeft':'-65px'},200);},
function () {$('a',$(this)).stop().animate({'marginLeft':'-0px'},200);}
);
});

Con este HTML

<ul id="navigation" style="list-style-type:none; margin-left:94%">
<li class="facebook">
<a href="#" title="facebook">FACEBOOK</a>
</li>
<li class="twitter">
<a href="#" title="facebook">TWITTER</a>
</li>
</ul>

El porcentaje (94% en este caso) acomodalo a tu gusto, y en el "li" podes colocar una imagen antes del texto.

Saludos.