CSSヘルプ - 画像を分割する

Question

私の大学のプロジェクト用の小さなサイトを作っていますが、そのほとんどは完成していますが、私は機能を追加する方法について悩んでいます。

http://wallbase.cc/toplistのようなサイトに移動してイメージをロールオーバーすると、画像の下部に小さな黒色のバーが表示され、サイズが表示されます。これを私のウェブサイトに追加したいのですが、黒バーに画像のオンタップを表示させるために使用するCSSのルールは分かりません。試したことのあるものは画像の横にページ。

ページには、jQueryの+ DOMで生成されますが、最終的な結果は次のように少しになります

：

<div id="content"> 
    <div class="error" id="pretext">Showing x results</div> 
    <div class="image"><img src="imagelink" height="200" width="200" alt="thumb"></img></div> 
</div> 

そして、私の関連するCSSルール：

#content { 
    background: #FBFBFB; 
    border: solid 1px #CCC; 
    border-top: none; 
    border-bottom: none; 
    padding: 15px; 
} 

.image { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #CCC; 
    display: inline-block; 
    margin: 5px; 
} 

Answer 1

マスターには<div>の背景イメージはありますか？

<div class="image" style="background-image: ('/images/whatever.jpg');"> 
    <div class="footerBar">[content]</div> 
</div> 

CSSでスタイルを設定するか、JavaScriptを使用して画像を設定します。

.image { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.footerBar { 
    background-color: lightGrey; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
    display: none; 
} 
.image:hover .footerBar { 
    display: block; 
} 

jsFiddle

Answer 2

はdivのあなたにposition: absoluteを設定してみてください画像の上に配置したい

Answer 3

「Rhinoのアイデアは良いものですが、あなたはそれ以外の場合はdiv.image

.image { 
    width: 200px; 
    height: 150px; 
    background-image: url("/images/whatever.jpg"); 
    position:inline-block; 
    border:1px solid green; 
} 
.footerBar { 
    position: static; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
} 

<div class="image"> 
    <div class="footerBar">[content]</div> 
</div> 

内に留まるように、静的にfooterbarのpositioonを設定したいと思う上の例を参照してください。 dはjavascriptを使用して、ページに関連する画像の位置を見つけ、より高いz-インデックスでテキストを絶対位置に配置する必要があります。