在列表項下的圖像位置文本

Question

所以我有一個圖像翻轉效果，需要兩個圖像在列表項中。然後它們在CSS內相互重疊並在懸停狀態下轉換。

我有一個需要下面每個圖像一些文字，但因爲圖像之一是position:absolute它只是掛出的形象背後：

我試着來包裝內的文字但由於某種原因Wordpress在編輯器中將它們剝離出來（我猜是因爲它在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。謝謝！

Answer 1

爲什麼你不使用頂級屬性來移動圖像和文本能夠被看到？

E.g.

.crew ul li img { 
    top: 10px; 
}