HTML, CSS, Не работает hover

Question

Всем привет, не работает анимация при навидение на иконку, что я не правильно делаю почему не работает? Пример кода взял отсюда Social Icons vision 3D

.footer-social a>img {
    margin-top: 8px;
    margin-right: 16px;
    background: #transparent;
    color: #000;
    text-align: center;
    text-decoration: none;
    position: relative;
    width: 48px;
    height: 59px;
    -webkit-animation: icon3d 200ms 10;
     animation: icon3d 200ms 10;
    color: #fff;
}


.footer-social a:hover img {
 -webkit-animation: icon3d 200ms infinite;
 animation: icon3d 200ms infinite;
}

@keyframes icon3d {
  0% {
    text-shadow: 5px 4px var(--redColor), -5px -6px var(--blueColor);
  }
  25% {
    text-shadow: -5px -6px var(--redColor), 5px 4px var(--blueColor);
  }
  50% {
    text-shadow: 5px -4px var(--redColor), -8px 4px var(--blueColor);
  }
  75% {
    text-shadow: -8px -4px var(--redColor), -5px -4px var(--blueColor);
  }
  100% {
    text-shadow: -5px 0 var(--redColor), 5px -4px var(--blueColor);
  }
}

<div class="footer-social default-container">
            <p>Follow us via social media:</p>
            <a href="#">
                <img src="assets/img/icons/youtube.svg"   alt="social">
            </a>
            <a href="#">
                <img src="assets/img/icons/facebook.svg"  alt="social">
            </a>
            <a href="#">
                <img src="assets/img/icons/instagram.svg"  alt="social">
            </a>
            <a href="#">
                <img src="assets/img/icons/twitter.svg"   alt="social">
            </a>
            <a href="#">
                <img src="assets/img/icons/telegram.svg"  alt="social">
            </a>
        </div>

Answer 1

Свойство text-shadow применяется только к тексту, потому иконки должны быть символьными, то есть быть частью шрифта. У Вас же это изображения, а не шрифт.

Более универсальный способ реализации - использование CSS-фильтров. В данном случае - drop-shadow(), так как он влияет и на текст и на прозрачные изображения. (Фильтр invert() здесь из-за того, что на скорую руку не нашёл белых иконок).

.footer-social a>img {
  --redColor: red;
  --blueColor: blue;
}

.footer-social a>img {
  position: relative;
  margin: 8px 0 16px;
  width: 50px; height: 50px;
  text-align: center;
  text-decoration: none;
  animation: icon3d 200ms 10;
}

.footer-social a:hover img {
  animation: icon3d 200ms infinite;
}

@keyframes icon3d {
  0% { filter: invert(100%) drop-shadow(5px 4px var(--redColor)) drop-shadow(-5px -6px var(--blueColor)); }
  25% { filter: invert(100%) drop-shadow(-5px -6px var(--redColor)) drop-shadow(5px 4px var(--blueColor)); }
  50% { filter: invert(100%) drop-shadow(5px -4px var(--redColor)) drop-shadow(-8px 4px var(--blueColor)); }
  75% { filter: invert(100%) drop-shadow(-8px -4px var(--redColor)) drop-shadow(-5px -4px var(--blueColor)); }
  100% { filter: invert(100%) drop-shadow(-5px 0 var(--redColor)) drop-shadow(5px -4px var(--blueColor)); }
}

<div class="footer-social default-container">
  <p>Follow us via social media:</p>
  <a href="#"><img src="https://img.icons8.com/glyph-neue/2x/youtube-play.png" alt="social"></a>
  <a href="#"><img src="https://img.icons8.com/material-rounded/2x/facebook-f--v2.png" alt="social"></a>
  <a href="#"><img src="https://img.icons8.com/glyph-neue/2x/instagram-new.png" alt="social"></a>
  <a href="#"><img src="https://img.icons8.com/ios-filled/2x/twitter.png" alt="social"></a>
  <a href="#"><img src="https://img.icons8.com/ios-filled/2x/telegram-app.png" alt="social"></a>
</div>

БЛОГ НА HUSL

HTML, CSS, Не работает hover

Ответы (1 шт):