Почему не работает transition свойство?

Question

[Костя]

Привет! Скажите почему не работает transition свойство? Хотелось бы плавное появление надписи при наведении на изображение!

<a href=""><img src="images/portfolio/img8.jpg" alt=""><span>Description</span></a>

img {
    width: 206px;
    height: 121px;
    position: relative;
}
img span {
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    display: none;
    width: 190px;
    position: absolute;
    padding: 5px 8px;
    bottom: 0;
    text-align: left;
    font-size: 13px;
}
a:hover span {
    display: block;
    -webkit-transition: bottom 1s ease-out 0.5s;
     -moz-transition: bottom 1s ease-out 0.5s;
     -o-transition: bottom 1s ease-out 0.5s;
     transition: bottom 1s ease-out 0.5s;
}

Скажите так вообще возможно использовать transition??

Answer 1

[Евгений Петров]

Переключение display не даст возможность применять transition. Используйте, например, opacity.

Если хотите плавное изменение свойств при наведении (или другом состоянии) — не цепляйте transition к этому состоянию (например, к :hover в вашем случае), потому что как только состояние пропадёт (увели курсор с элемента), то произойдёт резкая смена значений.

Однако, если вам нужно плавное появление и резкое исчезновение, то вешать нужно как раз на :hover (или другое выбранное для появления состояние).

Answer 2

[Myateznik]

Вот готовый вариант код:
jsfiddle.net/x6gLjo6o

Comments

[user_tm]

Спасибо!

Answer 3

[cha-cha]

transition применяется к самому элементу, а не к hover.

Answer 4

[Ден Тоцкий]

jsfiddle.net/0dtg8jk1/2

Answer 5

[Vonamor]

a:not(:hover) span {
Для плавной смены, когда курсор выведен за пределы div