Question

我正在写一个小画廊。有一些拇指彼此相邻，我希望这些拇指上有一层黑色。后来我想让图层透明，并在悬停在...上时将其设置为动画。

[编辑]我希望每张图片上的黑色过度，与img的宽度和高度相同......这样所有的图像都是全黑的

目前，黑匣子漂浮在某处但不完全在图像上......

我的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/

我必须从图像中移除宽度：auto，但无论如何都不需要。它用一个跨度包装图像，然后在图像后插入一个div，相同的大小和黑色背景。

如何在div容器内的图像上定位图层？

1 个答案: