如何在div容器內的圖像上放置圖層？

Question

我正在寫一個小畫廊。有一些拇指彼此相鄰顯示，我想要這些拇指上的黑色圖層。後來我想使圖層透明，並讓它在動畫上懸停時結束...

我希望每張圖片上的黑色都過度，與img的寬度和高度相同......這樣所有圖像是全黑

此刻的黑盒子漂浮完全像過的地方，但不是......

** ** http://jsfiddle.net/2NXF8/

我的HTML看起來像這樣：

<div id ="gallery_container"> 

     <div class ="image-container"> 

      <img src="http://polpix.sueddeutsche.com/polopoly_fs/1.394491.1273512871!/image/image.jpg_gen/derivatives/120x120_fit2max/image.jpg" alt="" title="" /> 
      <div class="overlay"></div> 
     </div> 

     <div class ="image-container"> 

      <img src="http://polpix.sueddeutsche.com/polopoly_fs/1.394491.1273512871!/image/image.jpg_gen/derivatives/120x120_fit2max/image.jpg" alt="" title="" /> 
      <div class="overlay"></div> 
     </div> 

     <div class ="image-container"> 

      <img src="http://polpix.sueddeutsche.com/polopoly_fs/1.394491.1273512871!/image/image.jpg_gen/derivatives/120x120_fit2max/image.jpg" alt="" title="" /> 
      <div class="overlay"></div> 
     </div> 


     <div class ="image-container"> 

      <img src="http://polpix.sueddeutsche.com/polopoly_fs/1.394491.1273512871!/image/image.jpg_gen/derivatives/120x120_fit2max/image.jpg" alt="" title="" /> 
      <div class="overlay"></div> 
     </div> 


     <div class ="image-container"> 

      <img src="http://polpix.sueddeutsche.com/polopoly_fs/1.394491.1273512871!/image/image.jpg_gen/derivatives/120x120_fit2max/image.jpg" alt="" title="" /> 
      <div class="overlay"></div> 
     </div> 


    </div> 
</div> 

個

我的CSS是這樣的：

#gallery_container{ 
    width:100%; 
} 
.image-container{ 
    /*width:200px;*/ 
    height:170px; 
    float:left; 
    width:196px; 
    text-align: center; 
    overflow:hidden; 
    border: 1px solid #a9b0ba; 
} 
.image-container img{ 
    width:auto; 
    height:170px; 
    cursor: pointer; 
} 

.overlay{ 
    position:absolute; 
    height:33%; 
    width:33%; 
    background-color: black; 
    z-index:2; 
} 

非常感謝！

Answer 1

試試這個修改的小提琴......

http://jsfiddle.net/2NXF8/4/

，我不得不刪除寬度：自動從圖像，但它並不總是需要的。它用一個跨度包裹圖像，然後在圖像後面插入一個div，其大小與黑色背景相同。