<!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>
.img_div {
margin: 50px auto;
position: relative;
overflow: hidden;
width: 268px;
height: 268px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 268px;
height: 268px;
background: rgba(95, 230, 240, 0.6);
display: none;
z-index: 1;
}
.img_div img {
transition: all 0.4s;
}
.img_div:hover .mask {
display: block;
}
.mask:hover+img {
transform: scale(1.1);
}
.all {
width: 30px;
height: 1px;
background-color: white;
position: absolute;
display: none;
z-index: 2;
}
.top-1 {
top: 30px;
left: 30px;
}
.right-1 {
top: 30px;
right: 30px;
}
.bottom-1 {
bottom: 30px;
right: 30px;
}
.left-1 {
bottom: 30px;
left: 30px;
}
.second {
width: 1px;
height: 30px;
background-color: white;
position: absolute;
display: none;
z-index: 2;
}
.top-2 {
top: 30px;
left: 30px;
}
.right-2 {
top: 30px;
right: 30px;
}
.bottom-2 {
right: 30px;
bottom: 30px;
}
.left-2 {
left: 30px;
bottom: 30px;
}
.img_div:hover .all,
.img_div:hover .second {
display: block;
}
</style>
</head>
<body>
<div class="img_div">
<div class="top-1 all"></div>
<div class="top-2 second"></div>
<div class="right-1 all"></div>
<div class="right-2 second"></div>
<div class="bottom-1 all"></div>
<div class="bottom-2 second"></div>
<div class="left-1 all"></div>
<div class="left-2 second"></div>
<div class="mask"></div>
<img src="./家居03/img/03img/3.png">
</div>
</body>
</html>
效果: