當動畫製作div時，請重新制作div

我正在製作投資組合頁面，並且每個項目都與圖像一起顯示。當動畫製作div時，請重新制作div

我想讓用戶在盒子上懸停時看到所有內容。我有懸停部分工作，但它推低了下面的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>

$('.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/

來源

2013-09-28 VizuaaLOG

您是否嘗試過修改z-index？ – Shabab

我沒有想到這一點，但因爲會有多行它不會真的工作，因爲使行有az索引爲100例如，然後行2有50行2將不會覆蓋第3行等 – VizuaaLOG

我看到它的方式，這是一個如果將所有行設置爲具有相同的z-index，然後僅在懸停時更改一個特定div的z-索引，則可輕鬆避免的問題。我在這裏誤解你的顧慮嗎？ – Shabab

一個解決方案（許多）：絕對定位您的縮略圖，並設置Z -index

參見： http://jsfiddle.net/qNuY4/1/

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

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

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

來源

2013-09-28 22:19:59 nebulae

這將如何工作與多行4.也意味着我將手動定位每個盒子，因爲位置絕對？ – VizuaaLOG

當動畫製作div時，請重新制作div

回答

相關問題