0

私は小さなギャラリーを書いて戦っています。いくつかの親指が隣り合って表示されており、これらの親指に黒いレイヤーが必要です。後でレイヤーを透明にして、ホバーしたときにアニメーションにしたい...

[編集]画像の幅と高さが同じで、各画像に過度に黒が必要です...すべての画像が完全に黒くなるように

現時点では、黒いボックスがどこかに浮かんでいますが、画像の上にはありません...

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

画像から width:auto を削除する必要がありましたが、必要ありません。イメージをスパンでラップし、イメージの後に div を挿入します。同じサイズで背景が黒です。

于 2012-07-04T17:07:28.207 に答える