<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.mask {
background-color:rgb(255, 0, 116);
width: 300px;
height: 200px;
position: absolute;
top: 0;
z-index: 99;
display: none
}
.image {
width: 300px;
height: 200px;
}
.box {
position: relative;
width: 300px;
}
.box:hover .mask {
display: block;
}
.box:hover .link {
width: 120px;
height: 40px;
display: block;
background: #FFF;
line-height: 40px;
text-align: center;
margin: 80px auto;
color: #ff00a5
}
</style>
</head>
<body>
<div class='box'>
<div class='image'>
<img src='https://photo.tuchong.com/316540/f/6406791.jpg'
width='100%'>
</div>
<div class='mask'>
<a class='link' href='https://blog.csdn.net/Hreticent/article/details/85109668'>
查看更多
</a>
</div>
</div>
</body>
</html>