Проблема в анимации соседних элементов при hover и keyframes

Question

У меня есть блок, внутри которого есть картинка и описание, которое первоначально скрыто. При наведении на картинку блок должен плавно появится из disblay: none. Я пыталась реализовать это так, но у меня не получилось. Притом без использования keyfraymes все работает. Либо, если анимация при наведении идет на саму картинку. Возможно ли это сделать без JS?

.achievements-container__img{
    width: 40px;
    height: 40px;
}

.achievements__description{
    disblay: none;
}

.achievements-container__img:hover + .achievements__description{
    animation: 1s show;
}

@keyframes show {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

Answer 1

У вас опечатка, непонятно это вы тут опечатались или у вас и в коде так. disblay: none

А display: none и display: block это какой-то принципиальный момент? Вот вроде так всё пашет. Если я правильно условие понял конечно.

UPD вставил display: none и display: block

.achievements-container__img{
    width: 160px;
}

.achievements__description{
    display: none;
}

.achievements-container__img:hover + .achievements__description{
    opacity: 1;
    display: block;
    animation: 1s show;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

<div>
  <img src="https://s2.cdn.teleprogramma.pro/wp-content/uploads/2020/02/webp_l/fd8181da239a741ce9420cbdbefaa8f8.webp" class="achievements-container__img">

  <div class="achievements__description">
    это Брэд Питт
  </div>
</div>

БЛОГ НА HUSL

Проблема в анимации соседних элементов при hover и keyframes

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