Question

如何更改效果，以便当我将鼠标悬停在图像上时，描述不会淡入，而是从底部向上推动所有内容。类似于here所见的方框？

代码：

<article class="project ">
    <section class="thumbnail">
        <img src="http://i.stack.imgur.com/SQbn0.gif" alt="image" />
        <section class="description">
            <hgroup>
                <h2>Title</h2>
                <h3>Cat1, Cat2, Cat3</h3>
            </hgroup>
            <p>Description</p>
                <small class="screenshot"><a class="single-image" href="http://i.stack.imgur.com/BQOva.gif">View Screenshot</a></small>
            <span>Launch <a href="http://test.com" target="_blank">Website</a> | View <a href="test2">Case Study</a></span>
        </section>
    </section>
</article>

CSS：

.project { border:1px solid #efefef;color:#fff;float:left;height:292px;margin:0 20px 20px 0;overflow:hidden;padding:3px;width:292px }
article.right { margin-right:0 }
.project .thumbnail { background:#222;height:292px;position:relative;width:292px }
.project .description { display:none;left:10px;position:absolute;top:10px;width:272px }
.project .description a { color:#fff }
body.home .project .description p { border-bottom:1px solid #777;margin-bottom:10px;padding-bottom:10px }
.project .description span { border-top:1px solid #777;float:left;margin-top:5px;padding-top:5px;width:272px }
.star { line-height:10px }
.screenshot { line-height:10px }

jQuery的：

$('.thumbnail').hover(function() {
    $('img', this).stop(true,true).fadeTo(200, 0.1);
    $('.description', this).stop(true,true).fadeIn(200);
}, function() {
    $('img', this).stop(true,true).fadeTo(200, 1);
    $('.description', this).stop(true,true).fadeOut(200);
});

Answer 1

你不需要任何定位，只需在图像上使用负边距，而overflow: hidden上的article.project将会处理它

在这个例子中，我使用jQuery来查找description元素的高度，然后在鼠标悬停时将图像向上移动相同的高度，解密不被隐藏，它只是被溢出修剪，所以当你将图像向上移动与描述向上移动的高度相同并变得可见

示例小提琴：HERE

使用上面的HTML：

CSS：

.project {
    border:1px solid #efefef;
    color:#fff;
    float:left;
    height:292px;
    margin:0 20px 20px 0;
    overflow:hidden;
    padding:3px;
    width:292px;
}

.project .thumbnail {
    background:#222;
    width:292px;
}

.project .description {
    background: #444;
    padding: 5px 10px;
    display: block;
}

.project .description a { color:#fff }

jQuery的：

$('.thumbnail').hover(function() {
    var desH = $('.description').outerHeight();
    $('img', this).css({"margin-top" : -desH});
}, function() {
    $('img', this).css({"margin-top" : 0});
});

或

添加

jQuery动画“幻灯片”

$('.thumbnail').hover(function() {
    var desH = $('.description').outerHeight();
    $('img', this).stop().animate({"margin-top": "-" + desH + "px"}, 1000 );
}, function() {
    $('img', this).stop().animate({"margin-top": "0px"}, 1000 );
});

如何显示隐藏的描述文本，将内容向上推

1 个答案:

示例小提琴：HERE

添加