正常效果
hover时的效果
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
<style>
body{
height: 100vh;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center;
background:black;
}
.container{
width: 450px;
height: 600px;
display: grid;
grid-template-columns: repeat(3,1fr);
}
.image {
box-shadow: inset 0 0 0 1px #fff;
transition: 0.5s;
background-size: 450px 600px;
background-image: url(./queen.webp);
position: relative;
}
.image:nth-child(3n+1){
left: -25px;
background-position-x: 0;
}
.image:nth-child( 3n+2 ){
left: 0px;
background-position-x: -150px;
}
.image:nth-child( 3n){
left: 25px;
background-position-x: -300px;
}
.image{
top: 25px;
background-position-y: -400px;
}
.image:nth-child(-n + 6){
top: 0;
background-position-y: -200px;
}
.image:nth-child(-n + 3){
top: -25px;
background-position-y: 0px;
}
.container:hover .image{
left: 0;
top:0;
box-shadow: inset 0 0 0 0px #fff;
}
</style>