title: Slide in text when icon is hovered
body: <p>I've been trying to get an effect where:</p>
  
  <ol>
  <li>Icon Font is shown, text beside it is hidden.</li>
  <li>when hover on an icon, slide in the text that is hidden. Slide in from the right.</li>
  </ol>
  
  <p>Here is what I've tried so far:</p>
  
  <p>(Since it will take to much time, replaced icons with some random keyboard symbols)
  <a href="http://jsfiddle.net/h9EX9/" rel="noreferrer">http://jsfiddle.net/h9EX9/</a></p>
  
  <pre><code>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; }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/x5Jej.png" alt="enter image description here"> </p>
  
  <p>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.</p>
  
  <p>So is this possible, if so how?</p>