jquery - 如何在 div 容器内的图像上放置图层？

Question

我正在努力写一个小画廊。有一些拇指彼此相邻显示，我想要在这些拇指上有一个黑色层。稍后我想让图层透明并在鼠标悬停时让它动画化......

[edit]我希望每张图片都覆盖黑色，与 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

试试这个修改过的 fiddle ...

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

我不得不从图像中删除 width:auto，但无论如何都不需要。它用 span 包裹图像，然后在图像后插入一个 div，大小相同，背景为黑色。