title: Apply css ease transitions on hover
body: <p>I have created box using css and on <strong>hover</strong> it will show overflow content(text),</p>
  
  <p><strong>Is there any way to apply smooth transaction effect to this hover effect?</strong></p>
  
  <p>I have tried using <code>css-transition</code> but its not working!</p>
  
  <blockquote>
    <p>I don't want to change the method of doing it! Need only css/Javascript solution.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
     height: 100%;
     width: 100%;
     font-size: 14px;
     color: #000;
     font-family: sans-serif;
     text-align: justify;
   }
   .box {
     margin: 100px auto;
     position: relative;
     width: 500px;
     cursor: pointer;
     transition: all 0.4s ease;
     background: #eee;
     padding: 5px;
     color: #222;
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-text-overflow: ellipsis;
     transition: all 1s ease;
   }
   .box:hover {
     white-space: normal;
   }
   .box:after {
     content: '';
     width: 75%;
     height: 10px;
     bottom: 0;
     box-shadow: 0px 9px 20px #ccc;
     position: absolute;
     left: 12%;
     z-index: -1;
   }
   .box &gt; div {
     overflow: hidden;
     transition: all 1s ease;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="first"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nisl eu tortor accumsan hendrerit. Nulla dui quam, mattis iaculis pharetra ut, cursus ut tortor. Donec velit nisl, pellentesque eu tellus ac, tempus efficitur elit. Sed et enim tincidunt,
      iaculis tortor eget, sodales nulla. In facilisis tincidunt aliquet. Mauris scelerisque leo eu lectus facilisis vulputate. Proin interdum sed nibh at luctus. In turpis nunc, gravida vel arcu eget, fringilla dapibus lacus. Duis sagittis nisl sed sem
      vulputate commodo. Morbi nisl neque, fermentum in mollis gravida, aliquam quis felis. Etiam et placerat mauris. Integer ut nulla in sem sagittis varius at et mi. Maecenas in rutrum orci. Sed vel mi vel erat vulputate sodales. Sed velit velit, ullamcorper
      eget finibus ut, pharetra ac enim. Morbi eu placerat orci. Mauris augue enim, semper quis convallis id, dapibus eget sem. Aenean lacus leo, fermentum luctus erat vitae, ultrices tempus libero. Curabitur ultrices tellus a mauris interdum, commodo consectetur
      magna sollicitudin.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>