Не работает свойство transition?

Question

[ole92]

Добрый день. При наведении на фото должен срабатывать transition. То есть плавно появляться фон и текст.

Скрытый текст:
.about-text {
display: none;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 15px;
position: absolute;
top: 0;
bottom: 0;
transition: 1s;
}

При наведении:
.about-item:hover .about-text{
background: rgba(0, 0, 0, 0.75);
display: flex;
}

Comments

[Сергей delphinpro]

Есть "дискретные*" свойства. Те, значения которых могут принимать ограниченное число вариантов, они как правило обозначены специальными словами. Например, свойство display может принимать значения none, block, inline и т.д. Свойство text-decoration - none, underline, line-through и т.д. К таким свойствам нельзя применить плавный переход (transition) из одного состояния в другое, потому что между этими состояниями нет промежуточных значений. То же самое относится к свойству z-index, он не может принимать дробных значений, background-image - картинка или есть или ее нет, или она просто сменяется на другую.
Напротив "недискретные" свойства могут плавно перетекать из одного состояния в другое. Преимущественно они заданы числом. Сюда же относится цвет, потому что цвет - это тоже число. Примеры таких свойств: left, width, background-position, font-size и т.д.

Запомните это, и не пытайтесь анимировать "дискретные" свойства.

* "дискретные" - мой термин, я не знаю как правильно их называть.

Answer 1

[Андрей Б.]

transition с display не работает
используйте для скрытия:

visibility: hidden;
opacity: 0;

для показа

visibility: visible;
opacity: 1;

Answer 2

[Сергей Горячев]

display: none не дружит с transition
используй opacity