Question

我试图让figcaption标题在悬停在底部时显示为淡入淡出/动画。但我无法得到figcaption div标签似乎从屏幕上消失。

我想要它，这样当你将鼠标悬停在横幅上时，无论鼠标悬停在哪里，都会出现无花果。

我有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;
}

CSS3悬停动画无响应

1 个答案: