transition

by ice_cream0414

HTML

<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>
    </div>
</div>
<hr>
<div id="parent40">
    <h1>Hover me (height: 40)</h1>
    <div id="child40">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>
    </div>
</div>

CSS

#child0 {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
}

#parent0:hover #child0 {
    height: auto;
}

#child40 {
    height: 40px;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
}

#parent40:hover #child40 {
    height: auto;
}