Efecto Hover

[anacona16]

Hola, no se como buscar este efecto, no se como se llama, espero puedan ayudarme:

Tengo una imagen como link:



Y quiero que al pasar el mouse se ponga esta image:



Pero que tenga un efecto de salir hacia la derecha.

Me gustaria hacerlo con CSS puro.

Podrian decirme como se llama este efecto.

Gracias.

[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>
 

[pzin]

Iniciado por Rodrhigo

Eso efecto no se puede hacer solo con CSS.

¡Claro que puede hacerse con CSS!

Lo único que tienes que hacer, es ponerle al enlace un ancho fijo, en principio igual de ancho que el icono, digamos 20 pixeles, un overflow y especificar la transición:

Código CSS:

a {
  width: 20px;
  overflow: hidden;
  transition: width 400ms ease-out;
}
 

Luego sólo tienes que cambiarle el ancho para cuando se pasa el ratón por encima:

Código CSS:

a:hover {
  width: 80px;
}
 

[Rodrhigo]

Jajaja no esperaba aprender algo nuevo. Gracias.

Estuve mirando en el w3c como funcionaba y wow es increible lo facil que resulta hacerlo con css.

Ejemplo 1
Ejemplo 2
Ejemplo 3

http://www.w3schools.com/css3/css3_transitions.asp

[pzin]

Iniciado por Rodrhigo

Estuve mirando en el w3c

Me vas a odiar por corregirte otra vez.

w3schools no tiene nada que ver con la W3C. De hecho es hasta una mala referencia. Véase w3fools.com

Pero si, las animaciones y transiciones de CSS son muy simples de hacer, además de que el efecto suele ser mucho mejor, más liviano y suave que con JavaScript.

[Rodrhigo]

Jajaja desde un comienzo que me refería al w3s incluso los enlaces apuntan a la página w3schools.
Fue solo un error de tipeo .


*nótese que la palabra página tiene tilde (lo pase por el Word para evitar errar de nuevo. xD)

[anacona16]

Muchas gracias, gracias de verdad.