Анимация CSS3: display + opacity

У меня проблема с анимацией CSS3.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Этот код работает, только если я удалю изменение display .

Я хочу изменить отображение сразу после наведения, но непрозрачность должна быть изменена с помощью перехода.