因此，该圆应该在图像下方（也在悬停期间），但是在图像下方和之前和之后，而在悬停期间图像下降。我已经对z-index及其位置进行了一些操作。
在这里您可以看到带有这两个对象的部分代码：
圆形对象（在悬停过程中向上移动）耐克鞋-我的图片
HTML
<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta charset="utf-8">
<link rel = "stylesheet" href = "CSS/style.css" type="text/css"/>
<body>
<div class="center">
<div class="container">
<img src="IMG/running_shoes_PNG5816.png" width="260px" alt="shoe" class="nike-shoe">
<div class="round">hfh</div>
<i class="back-logo">NIKE</i>
<div class="logo">Nike Shoes</div>
<div class="size-list">
<bold>SIZE :</bold>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
<div class="color-list">
<bold>COLOR :</bold>
<span>d</span>
<span>d</span>
<span>d</span>
</div>
<div class="but">
<input type="button" value="Buy Now"></input>
</div>
</div>
</div>
</body>
</html>
CSS
.center{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.container{
position: relative;
text-align: center;;
width: 330px;
margin-top: 15%;
background: #232323;
z-index: 10;
overflow: hidden;
border-radius: 15px;
}
...//another code
.round{
position: absolute;
right: -25%;
top: -30%;
background-color: #7cff17;
opacity: 1;
color: #7cff17;
border-radius: 50% 50%;
width: 100%;
height: 300px;
z-index: -1;
}
.nike-shoe{
z-index: 20;
transform: rotateZ(-20deg) rotateY(180deg) translateY(80px) translateX(30px);
}
...//another code
.nike-shoe,
.round,
.logo,
.size-list,
.color-list,
.but{
transition: 1s;
}
.size-list span,
.color-list span,
.but span{
cursor: pointer;
}
.container:hover .nike-shoe{
transform: rotateZ(-20deg) rotateY(180deg) translateY(-30px);
}
.container:hover .round{
transform: translateX(-50px) scaleX(1.5) ;
opacity:1;
}
.container:hover .logo{
transform: translateY(-50px);
}
.container:hover .size-list{
transition: 1s;
transition-delay: 0.3s;
transform: translateY(-50px);
opacity: 1;
}
.container:hover .color-list{
transition: 1s;
transition-delay: 0.6s;
transform: translateY(-50px);
opacity: 1;
}
.container:hover .but{
transition: 1s;
transition-delay: 0.9s;
transform: translateY(-50px);
opacity: 1;
}
.size-list span:hover{
transition: 0.6s;
background-color: #7cff17;
}
我发现了一个错误。 z索引为：10；在.container中，因此round具有与nike-shoe-image相同的z索引。谢谢您的帮助！