jquery - 制作动画时让一个 div 覆盖另一个

Question

我正在制作一个投资组合页面，并让每个元素都与图像一起显示。

当用户将鼠标悬停在框上时，我想让所有内容都可见。我有悬停部分工作，但它把它下面的 div 推了下来。我希望它越过其他 div 的顶部，这样我就可以给它一个阴影。我到处都看过，但解决方案不起作用。下面是相关的代码。

HTML

<div id="mainContent">

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
            <img src="http://lorempixel.com/300/200" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sequi minima saepe amet placeat reiciendis! Quod, qui magnam animi labore accusantium veniam eveniet dicta maxime ipsum ducimus mollitia obcaecati modi!</p>
                    <p><a href="#" class="btn btn-primary project-btn">View Project</a></p>
                </div>
            </div>
        </div>
   </div>

   <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
            <img src="http://lorempixel.com/300/200" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sequi minima saepe amet placeat reiciendis! Quod, qui magnam animi labore accusantium veniam eveniet dicta maxime ipsum ducimus mollitia obcaecati modi!</p>
                    <p><a href="#" class="btn btn-primary project-btn">View Project</a></p>
                </div>
            </div>
        </div>
   </div>     

JS

$('.thumbnail').hover(function() {
 var pos = $(this).offset();
 $( this ).animate({
     height: "455px"
 }, 200);
 }, function() {
     $( this ).animate({
     height: "187px"
 }, 200);

});

CSS

.thumbnail {
    padding: 4px;
    line-height: 1.428571429;
    background-color: #E7E7E7;
    border: 1px solid #DDD;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: 210px;
    width: 400px;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;

这是我目前拥有的一个 jsfiddle:http://jsfiddle.net/nS48w/2/

Answer 1

一个(许多)解决方案:绝对定位您的缩略图并设置 z-index

见: http://jsfiddle.net/qNuY4/1/

.thumbnail {
    ....
    display: block;
    position: absolute;
    ....
}

.top { top: 10px; z-index: 100;}

.bottom {top: 250px; z-index: 90; }