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

LordGusli

Проверенный
Регистрация
21.12.22
Сообщения
34
Реакции
6
Баллы
20
Всем привет, увидел такую интересную возможность на одним из зелёных форумов, как всплывающие изображения при наведении. Пытался сделать что-то похожее, но, видимо, либо не там вписываю, либо неправильный код:
Код:
.popup-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out; /* Анимация появления */
}

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

Мой форум:
У вас нет прав на просмотр содержимого спойлера, Войдите или Зарегистрируйтесь
Анимация на медали
extra:
.featuredBadges--member_view .featuredBadge {
    transition: transform .2s; /* анимация */
    width: 60px;
    height: 60px;
    margin: 4px;
}
.featuredBadges--member_view .featuredBadge:hover {
    transform: scale(1.5); /* размер зума */
}

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 617
Решения
18
Реакции
1 209
Баллы
85
ну явно код не весь, если при наведении, то должны быть свойства для hover
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 617
Решения
18
Реакции
1 209
Баллы
85
типа
Less:
.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;
    }
}
но было бы лучше увидеть в живую :)
 

ecnelis

Проверенный
Регистрация
10.11.22
Сообщения
26
Решения
1
Реакции
6
Баллы
40

Мой форум:
У вас нет прав на просмотр содержимого спойлера, Войдите или Зарегистрируйтесь
Анимация на медали
extra:
.featuredBadges--member_view .featuredBadge {
    transition: transform .2s; /* анимация */
    width: 60px;
    height: 60px;
    margin: 4px;
}
.featuredBadges--member_view .featuredBadge:hover {
    transform: scale(1.5); /* размер зума */
}
 
Решение

LordGusli

Проверенный
Регистрация
21.12.22
Сообщения
34
Реакции
6
Баллы
20
Анимация на медали
extra:
.featuredBadges--member_view .featuredBadge {
    transition: transform .2s; /* анимация */
    width: 60px;
    height: 60px;
    margin: 4px;
}
.featuredBadges--member_view .featuredBadge:hover {
    transform: scale(1.5); /* размер зума */
}
Попробую, если что отпишу о работоспособности. Спасибо!
 
Верх Низ