Bootstrap展開Div

Question

我正在嘗試創建一個與本網站做同樣的事情的網站。 www.treasurelimo.com如果您在主頁上向下滾動並查看「熱門目的地」。當你把圖像放在圖像上時，藍色區域會擴大，看到更多的信息。

我使用wordpress，但不想使用任何插件。現在我有從其他職位填充這些圖像。這是我的工作方式。這裏是我的網站：www.sealfitdev.demosite.us/coaching-staff我得到CSS來放置圖片中的文字，我只是需要它擴展，當我回顧它。任何人都可以幫我或指點我的帖子，說明我可以如何做到這一點？我正在查看Bootstrap文檔，但沒有成功。謝謝

Answer 1

您可以使用CSS轉換完成該效果（請參閱一些基本的examples here）。

看到這個爲你的例子at this JSFiddle（不是一個特別乾淨的例子，但它應該說明的概念）。

爲了清晰起見，我已將您的網站的標記加以簡化。現在

<div class="employee-thumb pull-left"> 
    <div class="inner"> 
     <img width="150" height="150" src="http://i.forbesimg.com/media/lists/people/elon-musk_416x416.jpg" /> 
     <div class="info"> 
      <p>Elon Musk</p> 
      <p>Additional information including buttons</p> 
     </div> 
    </div> 
</div> 

在CSS，我們可以設置.info要絕對定位相對定位的父內，.inner。由於.inner的溢出隱藏，因此可以通過調整絕對位置將內容推送到我們的可視範圍之外。

.inner { 
    position: relative; 
    overflow: hidden; 
    max-width: 150px; 
} 
.inner .info { 
    background-color: rgba(255,255,255,0.7); 
    position: absolute; 
    bottom: -4em; 
} 

在鼠標懸停在.inner，.info，底部返回的絕對定位爲0，滑動內容。

.inner:hover .info { 
    bottom: 0em; 
} 

而且我們使用CSS過渡動畫整個事情。

.inner .info { 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; 
}