<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/lobal.css" />
<style>
.main-c {
/*定义父级的大小，设置高度为图片高度，便于隐藏文字部分*/
width: 630px;
height: 400px;
/* background: blue; */
position: relative;
/*overflow: hidden;隐藏文字部分*/
overflow: hidden;
/*隐藏超出的部分，就是隐藏蒙版部分*/
}
.mainbox1 {
width: 630px;
height: 400px;
/* background: palevioletred; */
color: #fff;
}
.txt1 {
/*创建一个蒙版*/
width: 630px;
height: 250px;
position: absolute;
/*定好蒙版一开始在的位置*/
bottom: -250px;
/*距离main-c底部的距离为txt自身的高*/
left: 0;
transition: all linear 0.8s;
/*设置蒙版的上升动画效果*/
}
.main-c:hover .txt1 {
bottom: 0;
/*将蒙版底部位置上移,与父级main-c底部对齐*/
}
.txt1 span {
color: white;
font-size: 25px;
margin-left: 200px;
text-align: center;
}
.box1 p {
position: absolute;
display: block;
font-size: 50px;
color: white;
left: 50px;
top: 0px;
}
.main-c:hover .box1 p{
/* color: black; */
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="main-c">
<div class="mainbox1"><img src="img/jiao.png"></div>
<div class="box1">
<p>窖</p>
</div>
<div class="txt1">
<span>
<p>窖龄越长，其香越幽，其味越正，其品越高</p>
<p>绵延了千百年的老窖池——天益老号生生不息，</p>
<p>其别具一格自成体系的微观生态环境，</p>
</span>
</div>
</div>
</body>
</html>