Текст позиции ниже изображения в элементе списка

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; 
}