Slide in text when icon is hovered
css, css-transitions
Solution
Here's your demo with some work done on the CSS. It's a little long winded but gets the job done without JavaScript using only CSS transitions for animation. For some reason it animated better using `max-width` instead of `width` but I'm not sure why.
Demo: http://jsfiddle.net/Marcel/h9EX9/1/
When implementing properly, you might want to use an extra wrapper element to animate instead of the `<a>` as you will have multiple `<a>` elements in the "tags" button for example.
Problem
I've been trying to get an effect where: - Icon Font is shown, text beside it is hidden. - when hover on an icon, slide in the text that is hidden. Slide in from the right. Here is what I've tried so far: (Since it will take to much time, replaced icons with some random keyboard symbols) http://jsfiddle.net/h9EX9/ ``` ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; } ul li span { display: inline-block; } ul li a { display: inline-block; width: 0; height: 0; overflow: hidden; } ul li:hover a { transition: all 1s ease-out; width: 100%; height: auto; } ``` This is the effect I'm trying to accomplish. Text and and width of comment slides from the right. But there are other icons besides this one. I hope its also possible to slide those when the width of the background expands. So is this possible, if so how?