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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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