Поместить текст под изображением в элемент списка

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

Почему вы не используете верхнее свойство для перемещения изображения и текста, который можно увидеть?

Например

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