讓div與圖像/文字懸停覆蓋完全響應通過引導

我在設計中遇到了一個障礙，並已耗盡我的選項。本質上，我通過Bootstrap框架進行設計，以製作一組具有懸停疊加效果的圖像。效果和響應圖像在分離時工作得很好，但是當它們結合時，我失去了對它的響應，並且它保持固定爲300px x 250px的大小。讓div與圖像/文字懸停覆蓋完全響應通過引導

這是影響我想實現的類型（http://mikekus.com/portfolio）

伊夫加入我的代碼到的jsfiddle：http://jsfiddle.net/2BuDG/沒有bootstrap.css（因爲它是一個巨大的文件）

HTML

<div class="container-fluid"> 
<div class="row"> 


<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3"> 
<div class="view view-first"> 
    <img src=" SOURCE " class="img-responsive"/> 
<div class="mask"> 
<h2>Vector Illustrations</h2> 
<p>Illustration, Print, Digital Art</p> 
    <a href="#" class="portfolioButton">View Project</a> 
</div> 
</div> 
</div>

CSS

.view { 

    width: 300px; 
    height: 250px; 
    margin: 10px; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    cursor: default; 
    background: #fff; 
} 
.view .mask,.view .content { 

    width: 300px; 
    height: 250px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 

.view img { 
    display: block; 
    max-width: 100%; 
    height: 100%; 

}

我喜歡默認img引導類的「img-responsive」類，但添加了覆蓋div後，它不工作。我認爲我幾乎在那裏，但我已經放棄了這個難題。提前致謝！

來源

2014-03-27 user3470649

對於涉及HTML或CSS的問題，如果您的代碼已經就位並且失敗，那麼將會有一個jsfiddle（或同等版本）的問題。 –

我將我的代碼添加到jsfiddle中。我使用引導框架，我不認爲它有必要包括整個CSS文件，因爲它是巨大的。我添加了一個「靈感」鏈接，以表示我希望這個設計最終發揮作用。希望這可以幫助 – user3470649

如果你看看你鏈接到投資組合的代碼，你會看到：

<li> 
    <a href="/portfolio/Title"> 
    <img src="SOURCE" class='js-img'> 
     <div class="excerpt"> 
      <h3>Title</h3> 
      <p>Blah blah blah</p> 
     </div> 
    </a> 
</li>

筆者從來沒有一個固定的寬度或高度分配給<li>元素。他設置width: 25%以保持每行四個圖像並指定max-width: 480px他還在<img>元素上設置width: 100%。

他使用媒體查詢根據屏幕大小更改<li>元素的寬度和最大寬度。您可以使用引導程序的以下部分，以幫助您創建這些媒體查詢斷點調整你的投資組合元素：

http://getbootstrap.com/css/#grid-less

，你可能會想你的div和IMGS設置爲基於可變寬度的百分比，而不是的固定。

來源

2014-03-28 04:38:44 jennz0r

讓div與圖像/文字懸停覆蓋完全響應通過引導

回答

相關問題