Question

I’m fighting with writing a little gallery. There a some thumbs shown next to each other and i want a black layer on these thumbs. Later I want to make the layer transparent and have it animated when hovered over…

[edit]i want the black overly on each image, with the same width and height of the img…so that all the images are totally black

At the moment the black boxes float somewhere but not exactly over the image…

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

my html looks like this:

    <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> 

my css looks like this:

#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;
} 

Thanks a lot!

Answer 1

Try this modified fiddle…

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.