CSS3 анимация при наведении курсора не отвечает

Question

Я пытаюсь заставить подпись figcaption появляться / исчезать при наведении курсора внизу. Но я не могу получить тег divcaption div, кажется, исчезает с экрана.

Я хочу, чтобы при наведении курсора на баннер, figcaption появлялся независимо от того, где находится мышь.

У меня есть 4 элемента: - фоновое изображение - наложение градиента - описание - figcaption

the current code i have is: http://jsfiddle.net/fGF8E/

Answer 1

DEMO

.figcaption {
    z-index: 4;
    position: absolute;

    height: 50px;
    width: 100%;

    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.landing-cover:hover .figcaption{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}