html - 悬停时更改多个 css 元素

Question

我想用 CSS3 实现一个效果，我想从图形底部滑动一个 figcaption，然后在悬停时向上滑动图形。

或多或少像这个例子: http://tympanus.net/Tutorials/CaptionHoverEffects/index3.html

不幸的是，当悬停时只有图形幻灯片，而 figcaption 没有显示(它不会改变它的不透明度，也不会翻译)

这是我使用的代码:

#figure:hover img{
options} 

它有效，但是

#figure:hover figcaption{

options}

不起作用，为什么它只将悬停应用于 img 元素而不应用于图形？ http://jsfiddle.net/GKfQ2/

提前感谢回答者:)

Answer 1

您还没有将变换值应用于图形说明的悬停状态

JSfiddle Demo

修改后的 CSS

li {
    list-style: none;
    display: inline-block;
    overflow: hidden;
}

#featured figure{
    margin:0;
    position:relative;
}

#featured figure img {
    max-width:100%;
    display:block;
    position:relative;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    -o-transition: -o-transform 0.7s;
    transition:transform 0.7s;}

figure:hover img{

    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);

}

figure figcaption{
    position:absolute;
    bottom:0;
    padding:14px;
    background: #ddd;
    width:100%;
    height:50px;
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);    
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
}

figure:hover figcaption{
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);    
    transform: translateY(0%);

}

h4{
    font-size:18x;}

span{font-size:13px;
    color:black;}