Efecto Hover

[Rodrhigo]

Eso efecto no se puede hacer solo con CSS.
Podrias usar la libreria jquery de javascript.

La funcion que necesitas se llama .animate


Aqui un pequeño ejemplo para que tengas una idea de como funciona.

Código HTML:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function animar(imagen){
$('#editar').css("display","");
 
$('#editar').animate({
    left:"+=60px",
  }, 1000, function() {
            // Animacion completa
 
  });
imagen.src='lapiz_morado.bmp';
}
</script>
 
<div style='position:relative;float:left;width:100px;height:40px;'>
 <img id='editar' src='editar.bmp'  style='position:absolute;left:0px;top:0px;display:none;'/>
 <img src='lapiz.bmp' onmouseover="animacion(this);"  style='position:absolute;left:0px;top:0px;z-index:99;' >
</div>