Вопрос Анимация всплывающего изображения

[LordGusli]

Всем привет, увидел такую интересную возможность на одним из зелёных форумов, как всплывающие изображения при наведении. Пытался сделать что-то похожее, но, видимо, либо не там вписываю, либо неправильный код:

.popup-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out; /* Анимация появления */
}

В css не сильно силён, поэтому прошу помощи у Вас. Буду очень благодарен!

 

[Skaiman]

ну явно код не весь, если при наведении, то должны быть свойства для hover

 

[Skaiman]

типа

.popup-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Анимация появления */
    &:hover {
        display: block;
        opacity: 1;
    }
}

но было бы лучше увидеть в живую

 

[LordGusli]

https://zelenka.guru/donfilimon/#trophies

Мой форум:

Скриншот кода

У вас нет прав на просмотр содержимого спойлера, Войдите или Зарегистрируйтесь

 

[ecnelis]

https://zelenka.guru/donfilimon/#trophies

Мой форум:

Скриншот кода

У вас нет прав на просмотр содержимого спойлера, Войдите или Зарегистрируйтесь

Анимация на медали

.featuredBadges--member_view .featuredBadge {
    transition: transform .2s; /* анимация */
    width: 60px;
    height: 60px;
    margin: 4px;
}
.featuredBadges--member_view .featuredBadge:hover {
    transform: scale(1.5); /* размер зума */
}

 

[LordGusli]

Анимация на медали

.featuredBadges--member_view .featuredBadge {
    transition: transform .2s; /* анимация */
    width: 60px;
    height: 60px;
    margin: 4px;
}
.featuredBadges--member_view .featuredBadge:hover {
    transform: scale(1.5); /* размер зума */
}

Попробую, если что отпишу о работоспособности. Спасибо!