所以我有一个图像翻转效果，需要两个图像在一个列表项中。然后它们在 CSS 中相互叠加，并在悬停状态下转换。
我有一些文本需要在每个图像下方，但由于其中一个图像position:absolute只是挂在图像后面：
我试图将文本包装在段落标签中，但由于某种原因，Wordpress 在编辑器中将它们剥离（我猜是因为它在 a 内li）。我也尝试实现一些line-height，但这也让它变得更糟。
这是 HTML 标记的示例：
<li>
<img class="alignnone size-full wp-image-153" alt="lucas2" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas2.png" width="117" height="117" />
<img class="alignnone size-full wp-image-154 top" alt="lucas1" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas1.png" width="117" height="117" />
The Dungeon Master
</li>
这是CSS：
.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
vertical-align: bottom;
}
.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}
.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}
总的来说，我试图让它尽可能简单，这样其他用户就可以进入编辑器并插入图像并添加文本，而无需在文本编辑器中编辑任何 HTML。谢谢！