.image-container2 {
    position: relative;
    width: 300px; /* 设置为你的图片宽度 */
}

.image-container2 img {
    width: 100%;
    display: block;
}

.overlay{
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
    color: white;
    width: 100%;
    transition: .5s ease;
    height: 10%; /* 初始高度 */
    padding: 20px;
    text-align: center;
    overflow: hidden;
}

.image-container2:hover .overlay,.text {
    height: 50%; /* 鼠标悬停时的高度 */
}

.text {
    position: absolute;
    bottom: 10%;
    margin-bottom: 10px;
    width: 90%;
    font-size: 20px;
}