Apply css ease transitions on hover - html

Question

I have created box using css and on hover it will show overflow content(text),
Is there any way to apply smooth transaction effect to this hover effect?
I have tried using css-transition but its not working!
I don't want to change the method of doing it! Need only css/Javascript solution.
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 > div {
overflow: hidden;
transition: all 1s ease;
}
<div class="box">
<div class="first">
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.
</div>
</div>

Answer 1

You'd need to use some css property that can be animated...
In you case, instead of dealing with overflow, you would have to deal with the height, though it's not easy to make a transition from height fixed to auto.
A possible hack, as answered here, is to use max-height, though it's not pretty, as it requires you to use hard coded values...
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;
background: #eee;
padding: 5px;
color: #222;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.box:after {
content: '';
width: 75%;
height: 10px;
bottom: 0;
box-shadow: 0px 9px 20px #ccc;
position: absolute;
left: 12%;
z-index: -1;
}
.first {
transition: all 0.4s ease;
max-height: 13px;
overflow: hidden;
}
.box:hover .first {
max-height: 250px;
}
<div class="box">
<div class="first">
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.
</div>
</div>