如何将背景不透明度转换与图像元素分离

Question

这是我的代码：https://codepen.io/ijshd7/pen/GRJeQpP

.logo a {
position: relative;
display: inline-block;
}
.logo a::before {
pointer-events: none;
position: absolute;
content: '';
bottom: -30px;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.logo img:hover {
margin-top: -8px;
transition-duration: 0.75s;
}
.logo a:hover:before,
.logo a:focus:before,
.logo a:active:before {
filter: alpha(opacity=100);
opacity: 1;
}
.logo span {
transition-duration: 0.3s;
transition-property: transform;
}
.logo a:hover span,
.logo a:focus span,
.logo a:active span {
transform: translateY(-10px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<header class="flex justify-center h-26 p-8">
<div class="logo">
<a href="https://google.com">
<span>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
width="125"
>
</span>
</a>
</div>
</header>

我试图只让图像在y轴上偏移，同时让阴影效果出现，而不让它真正随着图像向上移动。在这里有分离关注点的问题，我很困惑如何做到这一点。基本上，我希望图像浮动，阴影出现。。但不能移动。

Answer 1

像下面这样简化代码，并将翻译应用于img而不是span:

.logo a {
position: relative;
display: inline-block;
}
.logo a::before {
pointer-events: none;
position: absolute;
content: '';
bottom: -30px;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.logo a:hover:before,
.logo a:focus:before,
.logo a:active:before {
opacity: 1;
}
img {
transition: transform 0.3s;
}
.logo a:hover img,
.logo a:focus img,
.logo a:active img {
transform: translateY(-10px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<header class="flex justify-center h-26 p-8">
<div class="logo">
<a href="https://google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
width="125"
>
</a>
</div>
</header>