how to animate an element html with height:0px to height:auto (CSS)

Question

I am trying to generate an animation by moving the mouse over my div, I want the height to be increased to the height it must have for its content to be fully displayed. the effect must be from a height(height:0px) that starts from zero to the total height(height:auto) of the content

this is my code:

div{
 height: 0px;
 transition: all 0.5s ease;
 overflow: hidden;
 border:1px solid red;
}

div:hover{
 height:auto;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

https://jsfiddle.net/df973ktr/

For a Chrome & Safari-specific fix, try animating to `height: fit-content;` — rpivovar, Mar 20 '19 at 17:56

Chris_00 · Accepted Answer · 2019-03-20T18:13:20.580

1

div {
  max-height: 0px;
  transition: all 0.5s ease;
  overflow: hidden;
  border: 1px solid red;
}

div:hover {
  max-height: 900px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

edited Mar 20 '19 at 18:13

answered Mar 20 '19 at 17:58

Chris_00

406
6
17

How can I dynamically get the maximum height? – yavg Mar 20 '19 at 18:00
or should I put a value of which I am sure I will never get over it? – yavg Mar 20 '19 at 18:03
You can't work with `max-height: auto;`. You have to specify a height otherwise it won't increase. – Chris_00 Mar 20 '19 at 18:05
@yavg Updated my answer. – Chris_00 Mar 20 '19 at 18:16

how to animate an element html with height:0px to height:auto (CSS)

1 Answers1