Efecto Hover

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