如何使：在響應縮略圖庫中的懸停效果

Question

我正在嘗試使:hover效果如http://studionudge.com/work。

我有三個縮略圖，每個都有30％的寬度和5％的邊距。由於百分比，我沒有固定的寬度，而且使其工作起來很困難。我無法讓懸停出現或居中文本。

這可能嗎？

這裏是我的HTML：

<div id="thumnails"> 
    <div class="thumb1"> 
    <div id="mask"> 
     <div class="thumb-title"><h3>Project title</h3></div> 
    </div> 
    <img src="images/work.jpg"> 
    </div> 
</div><!-- #thumbnails --> 

我的CSS：

#thumbnails { 
    border-bottom: 1px solid #b2b2b2; 
    overflow: hidden; 
} 

#thumb1 { 
    width: 30%; 
    height: auto; 
    margin-right: 5%; 
} 

#mask { 
    position: absolute; 
    background-color: #fff; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

#thumb1:hover #mask { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

#thumb1 img { 
    max-width: 100%; 
    height: auto; 
} 

.thumb-title { 
    position: absolute; 
    text-align: center; 
    margin-top: 150px; 
} 

Answer 1

當鼠標懸停在面膜，你沒有懸停在thumb1，這可能是它不工作的原因。您正在切入的網站就是一個很好的例子。百分比不應該是一個問題。