0

デザインしているウェブサイトに、透明なテキストオーバーレイが上にある画像があります。

すべての幅と高さを100％に設定しているにもかかわらず、透明なオーバーレイは画像よりも数ピクセル長いようです。余白やパディングもありません。

私は最後の30分を費やして、なぜそこにあるのかを理解し、それを取り除くことができるようにしました。どんな助けでもいただければ幸いです。

注：レスポンシブCSSフレームワークを使用しているため、絶対的な高さなどは使用できません

ライブサイトへのリンクは次のとおりです：http：//fine-grain-2.myshopify.com/

HTMLは次のとおりです。

<div class="six columns alpha">
    <div class="thumb"> 
       <img src="http://cdn.shopify.com/s/files/1/0209/0122/products/MG_9507_large.jpg?348" alt="" />
       <div class="overlay">
           <a href="/products/the-bowden-brown-cherry">
           <h2>THE BOWDEN</h2>
           <h3>brown + cherry</h3>
           </a>
       </div>
    </div>                  
</div>

CSSは次のとおりです。

#home img, a, .column, .columns {
    padding: 0;
    margin: 0;
    width: 100%;
}

#home .six.columns {
    padding-bottom: 40px;
    position: relative;
}

#home .six.columns.alpha {
    padding-right: 40px;
}

#home .six.columns .thumb {
    display: block;
    width: 100%px;
    height: 100%px;
    text-decoration: none;
    padding: 0;
    margin: 0;
    position: relative;

}

#home .six.columns .overlay {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    margin: 0;
    padding: 0;
}

#home .six.columns .thumb:hover .overlay {
    opacity: 1;
}

#home .six.columns h2 {
    color: #FAFAFA;
    display: block;
    font-size: 1.8em;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 27%;
    text-align: center;
}

#home .six.columns h3 {
    color: #FAFAFA;
    display: block;
    font-size: 1em;
    font-weight: lighter;
    letter-spacing: 0.6em;
    text-align: center;
}
4

1 に答える 1

3

に設定display: block;するだけ.thumb imgです。

于 2013-02-02T21:53:37.070 に答える