结果展示
html代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="./111.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="port-1 effect-1">
<div class="image-box">
<img src="../vuekinesis/src/assets/2.jpg" alt="Image-1">
</div>
<div class="text-desc">
<h3>xxx</h3>
<p>8年学习经验 </p>
</div>
</div>
</li>
</ul>
</div>
</html>
css代码
.container {
margin: 0 auto;
max-width: 1060px;
}
h2 {
color: #fff;
float: left;
width: 100%;
font-size: 24px;
font-weight: 400;
text-align: center;
padding: 50px 0 40px;
position: relative;
z-index: 50;
}
h2 span {
position: relative;
padding-bottom: 10px;
}
h2 span:after {
content: "";
width: 50%;
height: 3px;
background-color: #fff;
position: absolute;
left: 25%;
bottom: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: middle;
}
.full-length {
width: 100%;
float: left;
padding-bottom: 80px;
}
ul {
margin: 0 -1.5%;
}
li {
float: left;
width: 31.33%;
margin: 10px 1%;
list-style: none;
}
.text-desc {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
height: 100%;
opacity: 0;
width: 100%;
padding: 20px;
}
.port-1 {
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.port-1 .text-desc {
opacity: 0.9;
top: 100%;
transition: 0.5s;
color: #000;
padding: 45px 20px 20px;
}
.port-1 img {
transition: 0.5s;
}
.port-1:hover img {
transform: scale(1.2);
}
.port-1.effect-1:hover .text-desc {
top: 0;
}
