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

Question

[Antonio09]

что поправить
https://jsfiddle.net/4mLfvo9z/

Answer 1

[Иван В]

Плавного перехода не будет.
Потому что у вас для ".news__image:after" прописано свойство "transition: 0.3s opacity, 0.3s visibility, 0.3s background-color;".
Для visibility не работает transition. Т.е. даже с transition элемент не станет анимирован, всегда будет резко появляться \ исчезать. Здесь список свойств для которых работает анимация.
Убирайте свойство visibility, делайте исчезновение \ появление элемента через opacity и тогда все будет ок.

Comments

[Antonio09]

Иван В, не совсем пойму
так вроде ж без визибилити оно не работает

[Иван В]

Antonio09,
для ".news__image:after" уберите visibility, а opacity укажите "0".
Заработало? )

[Antonio09]

Иван В, все-равно как то не то
и как по мне ничего не поменялось

[Иван В]

Antonio09,
В jsfiddle внесите изменения и посмотрим.

[Antonio09]

Иван В, https://jsfiddle.net/9ed2cf7v/

[Иван В]

Antonio09,
ну вот, анимация теперь плавная. Но я так понимаю, смущает "шев" при затемнении в нижней части блока?

[Antonio09]

Иван В, ну может и то
но еще мне кажется будто иконки как-то странно появляются
или нормально?

[Иван В]

Antonio09,
добавье "news__box" свойство z-index, например, со значением "10".

[Antonio09]

Иван В, оо
спасибо огромное
а почему нужно такое задать?