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

您尚未将变换值应用于figcaption的悬停状态

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

悬停时更改多个css元素

1 个答案: