Как отделить преобразование непрозрачности фона от элемента изображения - PullRequest
Новая
       8

Как отделить преобразование непрозрачности фона от элемента изображения

1 голос
/ 05 апреля 2020

Вот мой код: 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, при этом одновременно появляется эффект тени, но при этом он фактически не перемещается вверх вместе с изображением. Имея проблемы, разделяющие проблемы здесь, и я не понимаю, как это сделать. В основном я хочу, чтобы изображение плавало, а тень появлялась ... но не двигалась.

1 Ответ

0 голосов
/ 05 апреля 2020

Упростите ваш код, как показано ниже, и примените перевод к 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>
...