圖像上的文本懸停在響應式網格中

Question

我製作了這個響應式圖像網格。 http://jsfiddle.net/ZhA6a/

<section class="project_main_container"> 
    <ul>  
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img> 
       </div> 
      </div> 
     </li>   
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img> 
       </div> 

      </div> 
     </li>   
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img> 
       </div> 
      </div> 
     </li>   
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img> 
       </div> 
      </div> 
     </li>   
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img> 
       </div> 

      </div> 
     </li>   
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img> 
       </div> 
      </div> 
     </li>  
    </ul>  
</section> 

ol, ul { 
    list-style: none; 
    line-height: 0; 
    } 

.project_main_container { 
    width: 100%; 
    } 

.project_container { 
    float: left; 
    width: 33.3333333333333333333333333333333333333333333333333%; 
    background-size:cover; 
    overflow:hidden; 
    } 

.project_image { 
    width: 100%; 
    } 

@media only screen and (max-width : 1000px) { 
/*row of two boxes*/ 

.project_container{  
    width: 50%; 
    } 
} 

每個畫面表示設計情況下，我已經做到了。我希望每個圖像變暗，文字標題顯示在懸停圖像的中間。

我知道我描述的效果是存在的，但我無法使它與響應式網格一起工作。

我希望有人能幫助我 - 謝謝！

Answer 1

爲此，您可以使用:hover一些CSS3的過濾器。這個想法是將您的標題添加爲網格塊中絕對定位的元素，並默認將其隱藏。在hover標題將有一個display:block適用於它，所以它出現。圖像將會有一個filter:brightness用於使其變暗一點。

HTML

<li> 
    <div class="project_container"> 
     <div class="project_media"> 
      <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img> 
      <h1>Project Title</h1> 
     </div> 
    </div> 
</li> 

CSS

.project_media h1 {  
    text-align:center; 
    position:absolute; 
    top:50%; 
    width:100%; 
    transform:translate(0%,-50%); 
    -webkit-transform:translate(0%,-50%); 
    color:#FFFFFF; 
    font-family:Arial; 
    text-transform:uppercase; 
    display:none; 

}

.project_container:hover img { 
    filter: brightness(0.3); 
    -webkit-filter:brightness(0.3); 
    -moz-filter:brightness(0.3); 
} 

.project_container:hover h1 { 
    display:block; 
} 

和工作demo。

Answer 2

類似這樣的http://jsfiddle.net/ZhA6a/1/ 不需要js。只要你喜歡，你可以調整文本的位置或顏色，這只是一個例子，以便你的想法

<section class="project_main_container"> 
    <ul>  
     <li> 
      <div class="project_container"> 
       <div class="project_media"> 
        <img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img> 
        <p>text</p> 
        <div class="dark"></div> 
       </div> 
      </div> 
     </li>   

    </ul>  
</section> 

CSS

p { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.project_media { 
    position: relative; 
} 
.project_media .dark { 
    display: none; 
    background: black; 
    opacity: 0.3; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.project_media:hover .dark { 
    display: block; 
} 
.project_media:hover p { 
    display: block; 
} 

.project_media:hover img { 
    opacity: 0.8; 

}