参考自：css实现抽屉动画 div显示隐藏的过渡效果_Artsman的博客-CSDN博客_css抽屉效果

 html 块

<div class="exampleBox">
    <p class="imgBox"></p>
    <p class="hideBox"></p>
</div>

css 块

.exampleBox{
    width: 200px;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.5s;
}
.imgBox{
    width: 200px;
    height: 200px;
    background-color: purple;
}
.hideBox{
    width:100%;
    height: 300px;
    background: darkcyan;
}
.exampleBox.on{
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.5s;
}

 JS 部分

$(".imgBox").hover(function() {
     // 鼠标移入时添加on类
     $(this).parent().addClass('on')
        
}, function() {
    // 鼠标移出时移出on类
    $(this).parent().removeClass('on')
});