0

我正在努力写一个小画廊。有一些拇指并排显示，我想要这些拇指上的黑色层。后来我想让图层透明并在悬停时让它动画......

[编辑]我希望每张图像上都覆盖黑色，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;
}

非常感谢！

4

1 回答 1

1

试试这个修改过的小提琴......

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

I had to remove the width:auto from the image, but it's not required anyway. It wraps the image with a span and then inserts a div after the image, the same size with a black background.

于 2012-07-04T17:07:28.207 回答