javascript - ホバー div 表示の WordPress 画像グリッド

Question

写真の 3x3 グリッドを作成し、マウスオーバーで各画像の長い説明を含む div を表示する最も簡単な方法は何でしょうか? これをwordpressのページで作成する予定です。ありがとう！

Answer 1

あなたが最も簡単な方法を求めたので、javascript なしでそれを行うことができますが、サポートは多少制限されます (少なくとも古いブラウザーでは..咳IE咳)。HTML は次のようになります。

<ul class="thumbs">
    <li>
        <img src="some_image_here" alt="some_description" />
        <p class="description">Lorem ipsum dolor sit amet</p>
    </li>
</ul>

説明自体は、サム ( を持つ) の下に隠され、サムホバーで表示される絶対要素にすることができoverflow: hidden;ます。
私のアイデアの例：

http://jsfiddle.net/SjF3N/

もちろん、ニーズに合わせてサムのサイズを微調整できます。私はそれを jsfiddle レイアウトに合わせようとしています。