带有on-hover 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布局中。