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

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而不是跨度：

.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>