CSS 通过hover选择器调整其他元素样式

业务场景：

鼠标移动到图片上，展示图片简介，移开消失

实现思路：

• 图片简介元素高度为0；
• 为图片添加hover选择器，选择器中将图片简介元素的高度恢复

html

<div id="app" class="img-container">
    <img src="assets/logo.png" />
    <div class="img-desc">
        <div>好看吗？好看就对了</div>
        <div>VUE</div>
    </div>
</div>

css

.img-container {
    width: fit-content;
    position: relative;
    border: solid #ddd 1px;
}
.img-container:hover .img-desc {
    height: 60px;
}
.img-desc {
    position: absolute;
    bottom: 0;
    height: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition:all 0.3s;
    display: flex;
    flex-direction: column-reverse;
}
.img-desc div {
    background-color: rgba(0,0,0,.4);
    color: #fff;
    padding-left: 10px;
    line-height: 30px;
}

实现效果