css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.box{
width: 1110px;
height: 247px;
margin: 20px auto;
}
.box li{
position: relative;
float: left;
width: 350px;
height: 247px;
margin-right: 30px;
overflow: hidden;
}
.box li:last-child{
margin-right: 0;
}
.box li a img{
width: 350px;
height: 247px;
transition: all .5s;
}
.box .txt{
padding: 20px 30px;
position: absolute;
bottom: -50px;
left: 0px;
width: 350px;
height: auto;
transition: transform .5s;
overflow: hidden;
z-index: 1;
}
.mask{
width: 350px;
height: 247px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
transition: all .5s;
}
.box li:hover .mask{
opacity: 1;
}
.box li:hover .txt{
transform: translateY(-50px);
}
.box li:hover img{
transform: scale(1.1);
}
.box .txt h4{
color: #fff;
margin-bottom: 5px;
font-weight: 400;
font-size: 14px;
}
.box .txt h5{
color: #fff;
font-size: 18px;
}
.box .txt span{
font-size: 14px;
color: #fff;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为新闻</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box ">
<ul>
<li>
<a href="">
<img src="./images/huawei1.jpeg" alt="">
<div class="txt">
<h4>产品</h4>
<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
<br><br>
<span>了解更多</span>
</div>
<div class="mask"></div>
</a>
</li>
<li>
<a href="">
<img src="./images/huawei2.jpeg" alt="">
<div class="txt">
<h4>行业洞察</h4>
<h5>迈向智能世界2030</h5>
<br><br>
<span>了解更多</span>
</div>
<div class="mask"></div>
</a>
</li>
<li>
<a href="">
<img src="./images/product.jpeg" alt="">
<div class="txt">
<h4>产品</h4>
<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
<br><br>
<span>了解更多</span>
</div>
<div class="mask"></div>
</a>
</li>
</ul>
</div>
</body>
</html>
问题
1.要先想好要用几个块,格式要工整
2.定位要看根据谁定位
3.z-index属性,定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
说明
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。