首先,准备一张图片
然后,在HTML文档中放一个div父盒子,里面放置了一个img标签和一个div标签,div标签有“HELLO”这一文本。
<div class="box">
<img src="./image/person01.jpg">
<div class="cover">HELLO</div>
</div>
接着,我们给父盒子指定基本样式:宽高200、边框圆角50%、白色的1px的直线边框、盒子阴影。
.box {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid white;
box-shadow: 0 0 10px black;
}
给图片设置大小:宽度为父盒子的100%,高度自适应。
.box img {
width: 100%;
}
给类名叫做cover的div(这个div就是我们的遮罩层)设置如下的基本样式。
.cover {
width: 200px;
height: 200px;
background-color: black;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
}
此时我们可以看到如下结果:
紧接着,我们可以通过定位把下面黑色的遮罩层放上来,同时将遮罩层的通明度设置为0、缩放设置为0。(注意:别忘了给父盒子box加上相对定位:position: relative哦,不然的话,遮罩层不会在原来图片的位置噢)
.cover {
position: absolute; /*定位*/
top: 0;
left: 0;
opacity: 0; /*透明度*/
transform: scale(0);/*缩放*/
}
最后,我们给box设置当鼠标经过的时候,将遮罩层的透明度修改为0.4、缩放设置为1。在box里面添加overflow:hidden,用来把溢出内容隐藏。
.box:hover .cover {
opacity: 0.4;
transform: scale(1);
}
这样我们就实现了一个遮罩层小案例啦~,下面是实现效果:
鼠标放上去前:
鼠标放上去之后:
最后的最后是案例的完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 50px auto;
border: 1px solid white;
box-shadow: 0 0 10px black;
position: relative;
overflow: hidden;
}
.box img {
width: 100%;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: black;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
opacity: 0;
transform: scale(0);
}
.box:hover .cover {
opacity: 0.4;
transform: scale(1);
}
</style>
</head>
<body>
<div class="box">
<img src="./image/person01.jpg">
<div class="cover">HELLO</div>
</div>
</body>
</html>