Почему происходит застревание картинке после закрытия попапа?

Question

[Полина Емельянова]

Добрый день, коллеги.
Прошу помогите с задачкой:

Есть сайт
dev.imdeveloper.ru/katletika
В секции МЕНЮ
После закрытия попапа (ховер на карточку и клик на кнопку со стрелкой - всплывает попап) картинка карточки - "застревает".
tinyurl.com/m4szb3p

"Оттаивает" при повторном ховере.
tinyurl.com/m4szb3p

Прошу, укажите, что я сделала не так?

Заранее огромное спасибо!!!!

Answer 1

[Radja7]

Замените стили данного класса на эти:

.menu__wrap:hover .menu__item-icon{
	opacity: 1;
   z-index: 1;
}

.menu__item-icon{
	position: absolute;
   width: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 0.3s ease-in-out;
   text-align: center;
   opacity: 0;
   z-index: -100;
}

Должно помочь

Comments

[Полина Емельянова]

ОГРОМНОЕ!!! СПАСИБО!!! Плюс в карму!!! Я там с трансформ и позиционированием навертела, выходит?

[Radja7]

Всегда пожалуйста! Там блок с иконками вне ховера, располагался под картинкой. После закрытия модального окна, он начинал занимать место в потоке с картинкой отодвигая ее наверх (пустое место под картинкой ), а картинка обрезалась, т.к. родителю задано свойство overflow: hidden

[Полина Емельянова]

Radja7: вот такот... Говорила мне "Мама": "аккуратнее с хидден, аккуратнее с хидден..." Еще раз спасибо. Теперь все встало на свои места. :-*

Answer 2

[Егор Живагин]

Так... У меня ничего не застревает. Единственное - резко закрывается, потому что на display не действует transition