HTML代码

1
2
3
4
5
6
7
8
9
10
11
<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>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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
}

PS.

来源:鼠标移入div显示查看更多demo_Hey-CSDN博客