1

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

有人知道怎么做吗？

亲切的问候

4

1 回答 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/

于 2013-04-17T22:42:20.307 回答