我已经创建了下一个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/在某些块上,您可以单击,然后显示标题并且图像会上升。 这就是我需要的,但随后就悬停了。

有人知道怎么做吗?

亲切的问候

===============>>#1 票数:3 已采纳

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

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/

  ask by user1874095 translate from so

未解决问题?本站智能推荐: