Question

我已经创建了下一个html代码段：http://jsfiddle.net/4gDMK/ 这很好用，但我找不到同时移动字幕和图像的方法，因此图像不再完全可见。

这是基础html：

<figure>
    <img src="http://4.bp.blogspot.com/_1vc-O2P4PHQ/S1bI97AgDoI/AAAAAAAACxs/MOo533hzeSw/s200/technical_stockphoto2.jpg" alt="Stockphoto 1" />
    <figcaption>Caption text</figcaption>
</figure>

请查看此网站以获取示例：http://etchapps.com/ 在某些块上，您可以单击，然后显示标题并且图像上升。这就是我需要的，但随后就悬停了。

有人知道怎么做吗？

亲切的问候

Answer 1

好的，有很多变化，所以请耐心等待。

CSS已被削减到此（因为我们将使用JQuery完成所有效果）：

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display: block;
    max-width:200px;
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 20px;
    width:160px;
}

这会导致标题隐藏在图像下方的网站之外，直到我们准备好显示它为止。

现在为javascript：

//Thanks roXon
$(function(){
    $('figure').on('mouseenter mouseleave', function( e ){
        var toPos = e.type=="mouseenter" ? $('figcaption',this).innerHeight() : 0 ;
        $('img', this).stop().animate({marginTop: -toPos}, 200);
    });
});

导致任何数字悬停以升高其下方标题的高度，从而显示标题并隐藏图像的顶部。当鼠标离开时，我们将边距设置回默认值0。

更新了小提琴：http://jsfiddle.net/NkXCd/1/

使用CSS3代替JQuery（再次按照roXon的建议）

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display:block;
    max-width:200px;
    margin-top:0;
       -webkit-transition: 0.3s;
           transition: 0.3s;  
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 1);
    color: white;
    padding: 10px 20px;
    width:160px;
}

figure:hover img{
    margin-top:-40px;
}

CSS3小提琴：http://jsfiddle.net/NkXCd/2/

当标题向上滑动时，如何使图像向上滑动？

1 个答案: