效果

预览页面：https://demo.hecady.com/2/

结构

现来看代码吧

<div class="wrapper">
    <div class="season chun">
        <div class="container">
            <h3>春季</h3>
            <p>春季是一年四季之第一季。按照公历，北半球的春季为3月、4月和5月；南半球的春季为9月、10月和11月。此外，在大中华地区的传统中，春季的开始是立春，春季的结束是立夏。在一些地区，如北美，春季被认为从春分开始，到夏至结束。</p>
        </div>
    </div>
    <div class="season xia">
        <div class="container">
            <h3>夏季</h3>
            <p>夏季是一年四季的第二季，也是一年中最炎热的季节，同时也是一年中太阳高度最高、白昼最长的季节。北半球的夏季依公历通常被认为在6、7、8月，但实际则随地区而不同。夏季是许多农作物旺盛生长的季节，充足的光照和适宜的温度给植物提供了所需的条件。此外，由于夏季时全球大部分中小学学生都放暑假，因此也是相当旺盛的学生旅游季节。</p>
        </div>
    </div>
    <div class="season qiu">
        <div class="container">
            <h3>秋季</h3>
            <p>秋季是一年四季之中的第三季。北半球的秋季一般在公历9月至12月，南半球则为3月至6月，但在大中华地区的传统上，秋季始于立秋，结束于立冬。</p>
        </div>
    </div>
    <div class="season don">
        <div class="container">
            <h3>冬季</h3>
            <p>冬季是部分地区一年四季中的第四季，由于天气转冷，在很多地区都意味着沉寂和冷清。生物在寒冷来袭的时候会减少生命活动，很多植物会落叶，动物会休眠，有的称作冬眠。候鸟会飞到较为温暖的地方过冬。以北半球为例，除了赤道一带其他地方都有冬季：曼谷冬季约两个月、北极冬季约七个月。用来形容冬天的成语：天寒地冻、冰天雪地。</p>
        </div>
    </div>
</div>

使用的是一个大的盒子，先让这个大盒子在body里面水平居中显示，使用fiex布局。参考10种方法告诉你如何让css实现元素或者盒子水平垂直居中。让season向左或者向右，给一个外边距，把盒子间隔起来。container的鼠标悬浮撑开的大小和season一样。container给一个比父盒子小的宽度和高度，把p标签使用display:none隐藏起来，当鼠标悬浮到season上时，container的宽度和高度等于父元素的宽高，p标签显示出来。当然也可以不隐藏如果不隐藏的话，就需要给container一个溢出隐藏，overflow：hidden，因为当鼠标没有悬浮到season上时，h3设置了行高等于鼠标没有悬浮到season的高，这个时候p标签里的内容就会溢出，因为页面里没有其它内容，所有隐藏p标签显然更好。最后其实也可以不用这么盒子写，用ul>li>div也是可以的。用不同的方法都可以实现，当然能做出来就是最好的。

CSS样式

* {
    margin: 0;
    padding: 0;
}

body {
    /*水平居中对齐*/
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0d0d0d;
}

.wrapper {
    width: 1040px;
    height: 340px;
}

.season {
    /*浮动*/
    float: left;
    /*父相子绝*/
    position: relative;
    width: 220px;
    height: 340px;
    margin: 0 20px;
}

/*背景图片*/
.chun {
    background-image: url("../image/春.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.xia {
    background-image: url("../image/夏.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.qiu {
    background-image: url("../image/秋.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.don {
    background-image: url("../image/冬.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


.container {
    /*定位标题*/
    position: absolute;
    bottom: 10px;
    left: 50%;
    /*内容溢出隐藏*/
    overflow: hidden;
    width: 200px;
    height: 40px;
    /*让盒子水平居中 相对自身的宽度移动*/
    transform: translateX(-50%);
    /*过渡*/
    transition: all .3s ease;
}

.container h3 {
    background-color: #ffffff;
    text-align: center;
    line-height: 40px;
}

.container p {
    display: none;
    padding: 0 10px;
    word-break: break-word;
    word-wrap: break-word;
    text-indent: 2em;
}


.container:hover {
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    background-color: #ffffff;
}

.container:hover p {
    display: block;
}

源代码下载

https://cloud.hecady.com/s/eLUb