Apply css ease transitions on hover

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>

`overflow` is not an animatable property. It has no interim values. — Paulie_D, Dec 11 '14 at 12:24
The answer is probably "No" then, these kinds of effects are the area of Javscript. — Paulie_D, Dec 11 '14 at 12:27

score 3 · Accepted Answer · edited May 23 '17 at 11:51

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>

effect working fine +1 but i need that shadow at the bottom, overflow:hidden is hiding box-shadow. — Suresh Karia, Dec 11 '14 at 12:39
@Eirenaios - I've editted the answer, adding the transition/overflow to the `.first` div, instead of the `box`. This way the shadow appears — LcSalazar, Dec 11 '14 at 12:46

Apply css ease transitions on hover

1 Answers1