css - 画像を正しく配置する

Question

非常に特殊な状況に遭遇しましたが、何が起こっているのかわかりません。私は自分の 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/

リンク画像の画像だけを処理した場合：

http://jsfiddle.net/XJq5W/