1

У меня есть блок, внутри которого есть картинка и описание, которое первоначально скрыто. При наведении на картинку блок должен плавно появится из 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;
    }
}

1 ответ 1

4

У вас опечатка, непонятно это вы тут опечатались или у вас и в коде так. 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>

3
  • Да, display: none - было обязательное условие. 9 мар 2021 в 14:50
  • Ну, вставил display:none все так же работает. 9 мар 2021 в 15:14
  • Да, все работает, спасибо большое 11 мар 2021 в 15:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.