当显示时，如何使隐藏的描述文字向上推内容

如何解决当显示时，如何使隐藏的描述文字向上推内容

|| 当前设置如下：http://jsfiddle.net/FMqbP/2/ 如何更改效果，以便当我将鼠标悬停在图像上时，描述不会淡入，而是从底部出现，将所有内容向上推。类似于这里看到的盒子？ 码：

<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\',true).fadeIn(200);
},function() {
    $(\'img\',1);
    $(\'.description\',true).fadeOut(200);
});

    

解决方法

您不需要任何定位，只需在图像上使用负边距，然后在

article.project

上的

overflow: hidden

就可以解决此问题 在此示例中，我使用jQuery查找

description

元素的高度，然后在鼠标悬停时将图像向上移动相同的高度，去污并没有被隐藏，只是被溢出所剪切，因此您在移动图像时向上移动与描述相同的高度 小提琴示例：此处 使用上面的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 );
},this).stop().animate({\"margin-top\": \"0px\"},1000 );
});