Изображение, перекрывающее диапазон в другом элементе li

Question

EDIT: Я создал JS-Fiddle, который показывает вам код в действии, и вы можете видеть, как текст надписи накладывается.https://jsfiddle.net/wj76sv1h/

У меня есть список разделов, отображающих изображения, полученные из базы данных. Этот список создается PHP, но когда я попытался добавить подпись, как вы можете видеть из image (извините, я не могу включить изображение непосредственно в сообщение), он перекрывается изображением другого элемента Li. Заголовок - это тег span.

Я попытался изменить z-индекс изображений и divs, однако кажется, что он не действует. Я также использую этот код для создания сетки с использованием lis.

function createListStyles(rulePattern, rows, cols) { 
var rules = [], index = 0; 
for (var rowIndex = 0; rowIndex < rows; rowIndex++) { 
    for (var colIndex = 0; colIndex < cols; colIndex++) { 
     var x = (colIndex * 100) + "%", 
      y = (rowIndex * 100) + "%", 
      transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }"; 
     rules.push(rulePattern.replace("{0}", ++index) + transforms); 
    } 
} 
var headElem = document.getElementsByTagName("head")[0], 
    styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0]; 
if (styleElem.styleSheet) { 
    styleElem.styleSheet.cssText = rules.join("\n"); 
} else { 
    styleElem.textContent = rules.join("\n"); 
} 
} 

Если бы кто-нибудь мог мне помочь, это было бы здорово. Благодарю. Это html, используемый для элемента/заголовка.

<div class="item" id="item-covert"><span>Caption</span> <div id="item-price"> $54.36</div><img class="item-image" src="image.url"></div> 

Css:

.item { 
    position: relative 
} 
.item span { 
    display: none; 
    position: absolute; 
    bottom: 0; 
    padding: 10px; 
    background: rgba(255,255,255,0.99); 
    /*top: 20px; 
    width: 300px; 
    height: 50px;*/ 
    font-family: Open Sans; 
    /*margin-left: 110px;*/ 
    left: 110px; 
} 

.item:hover span { 
    display: block 
} 

Answer 1

Ваше позиционирование span перемещает его на изображение. Переместите его на десять пикселей дальше вправо, и все выглядит отлично. https://jsfiddle.net/yak613/5p3uuzfg/
Я взял некоторые вольности с текстом заголовка :)
И некоторые предложения для холодных титрами цветов :)

Live Example