非常に特殊な状況に遭遇しましたが、何が起こっているのかわかりません。私は自分の Web ページを整理して、同じサイズの画像のコレクションをグリッドのようなパターンでまとめて表示できるようにしています。これらの画像は記事へのリンクになります。
私の画像には、それぞれにコードがあります:
<div class="linkyimage">
<img src="image/lblue.png" alt"blue" />
<p class="description">
Oy oy oy
</p>
</div>
そして私のCSS:
.description{
background-color:#000;
position: absolute;
color:#fff;
opacity:0;
top:150px;
left:10px;
}
.linkyimage{
position: relative;
display: inline;
float: left;
height: 250px;
width: 250px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
.linkyimage:hover img{
opacity:0.5;
}
.linkyimage:hover .description{
opacity: 1;
}
しかし、これはうまくいきません。画像を押しつぶして 250px 四方のコンテナに配置するように見えますが、その効果はかなり奇妙ですが、説明は完全に表示されます。だから私は考えを持っていました。多分私はそれらを画像としてフォーマットするだけです。に変更します
.linkyimage img{
blah blah
}
これにより、画像が完全に表示されます....しかし、以前のように画像の上ではなく、画面の左端に説明が表示されるようになりました。
ここで実際に何が起こっているのか、誰か説明できますか? リンク画像 (すべてのボックスに含まれる) の画像をフォーマットするだけで、ボックスのフォーマットが台無しになるのはなぜですか? 画像ではなくコンテナーのみをフォーマットすると、画像が圧縮されてボックス全体に収まらないのはなぜですか?
すべてかなり独特です。
編集:
リンク画像を開いたままにする: http://jsfiddle.net/28n9p/
リンク画像の画像だけを処理した場合: