Html CSS3悬停动画没有响应

我正在尝试使figcaption标题在底部的悬停处显示淡入/动画。但我无法获取figcaption div标签，它似乎从屏幕上消失了

我希望这样，当您将鼠标悬停在横幅上时，无论鼠标悬停在何处，figcaption都会出现

我有4个要素： -背景图像 -渐变叠加 -描述 -菲卡普顿

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

---

您的小提琴没有显示图像，控制台中有一个错误，请检查它，我只是使用谷歌的图像进行演示。由于某些原因，两个图像都无法正常工作：/大小为900px 350px，我认为AdBlock为我屏蔽了该图像。使用模拟图像区域[演示]这就是您想要的？完美！工作出色！快速问题我一直在努力使大小在不同的视口上保持在350px的高度，并使图像居中，即在小屏幕上，左/右部分将被切断，但图像本身将保留在屏幕上center@JT1你能简单地解释一下吗？或者提供一个演示，这样我可以更好地理解。我创建了一个提琴来演示这个问题：正如您从演示中看到的，当屏幕处于移动视点时，图像会被压缩以适合350px的盒子大小，但是我希望它能够使图像保持其原始纵横比，而不是移动到盒子的中心（必要时切断左侧或右侧）

.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;
}