1つのdivをホバーの別のdivの背後からスライドさせようとしています

Question

私は、上に乗ったときに別のdivをより滑らかに表示するテキストでdivを作成しようとしています。私は現在、これを達成するのが難しいです。良い解決策がJQueryを含んでいれば、あなたはELI5（私はJQueryを使ったことがないですか？）私が探しているものの基礎は以下の通りです。私はちょうどそれが突然現れるのではなく、追加のテキストが滑り落ちるのを示すホバー上のアニメーションが存在することを望みます。

.container { 
 
    font-size: 2em; 
 
    box-shadow: 0px 0px 3px 1px black; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background-color: #E7E7EF; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 
.below { 
 
    display: none; 
 
    -webkit-transition-duration: 0.5s; 
 
    transition-duration: 0.5s; 
 
} 
 
.container:hover .below { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="above"> 
 
    <p> 
 
     Some text in the above div 
 
    </p> 
 
    </div> 
 
    <div class="below"> 
 
    <p> 
 
     More text that slides down from under the above div 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

使用overflow代わりdisplay https://jsfiddle.net/yb6vct8a/1/

.container { 
    font-size: 2em; 
    box-shadow: 0px 0px 3px 1px black; 
    margin: 20px; 
    padding: 20px; 
    background-color: #E7E7EF; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
    width: 80%; 
    margin-top: 50px; 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 


} 

.below { 
    max-height: 0; 
    overflow: hidden; 

    /* Set our transitions up. */ 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 
} 

.container:hover .below { 

    max-height: 200px; 


}