<style>
div {
width: 600px;
height: 600p x;
border: 2px solid fuchsia;
/* 清除浮动 */
overflow: hidden;
/* 相对定位 */
position: relative;
/* 外边距 */
margin: 100px auto;
}
div::after {
/* 盒子内容为空 */
content: '';
/* 绝对定位 */
position: absolute;
/* 移动的值 */
bottom: -200px;
left: 0;
background-color: rgba(0, 0, 0, .5);
/* 透明条的㝟高 */
width: 600px;
height: 200px;
transition: all 1s;
}
div:hover::after {
bottom: 100px;
}
</style>
<body>
<div></div>
</body>