<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
height: 300px;
/* vertical-align: middle; */
}
ul {
/* list-style: none; */
/* list-style-type: circle;空心圆 */
/* list-style-type: square;正方形 */
/* list-style-position: outside;列表标记在外面 */
/* list-style-position: inside;列表标记在内侧 */
/* list-style-image:url('img/矩形11.png');图片 */
list-style: none;
}
.clearfix::after {
content: "";
clear: both;
}
.list {
width: 640px;
margin: 0 auto;
}
.list li {
float: left;
width: 300px;
margin: 10px;
position: relative;
/* overflow:hidden; */
}
.list li .mask {
position: absolute;
top: -300px;
/* left: -300px; */
width: 300px;
height: 300px;
background-color: rgba(0, 255, 255, 0.3);
transition: .3s;
}
.list li:hover .mask {
/* left: 0px; */
top: 0px;
}
</style>
</head>
<body>
<ul class="list ">
<li><a href=""><img src="img/07.jpg" alt=""></a>
<div class="mask"></div>
</li>
<li><a href=""><img src="img/08.jpg" alt=""></a>
<div class="mask"></div>
</li>
</ul>
</body>
</html>