title: How to scroll text within a div to left when hovering the div
body: <p>I have a text that does not fit in a <code>div</code> tag, <code>.textBox</code>. So I want to make a function that in case of hovering the parent div, the text starts scrolling from left to right. So the user can read the full content. And when it is not hovering it fades back to the default position.</p>
  
  <p>I do not want to use marquee. I want do keep the structure as it is and use CSS, or JavaScript to solve it.</p>
  
  <p>Here is an example without the function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.textBox {
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    overflow: hidden;
    line-height: 30px;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="textBox"&gt;Some Content here and some more here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea how to do this?</p>