Переход неправильно выравнивается

Question

Я пытаюсь сделать так, чтобы вы получили объяснение моего проекта, когда наводите курсор на изображение. Если я устанавливаю позицию span.text-content в абсолютную, все элементы списка правильно выравниваются, но я получаю один квадрат в верхнем левом углу, и я не вижу его вообще, как только прокручиваю нижние изображения.

Когда я устанавливаю положение относительно, он отделяет все мои изображения, и текстовое поле появляется с левой стороны и под изображением, но по крайней мере я получаю один для каждого изображения. Я играл с z-индексом, потому что сначала вы могли видеть только слово «Объяснение» как ленту за верхним изображением.

Наконец, мой -o-переход не будет седым, и я не уверен, что это значит? Я проверил jshint, и я не ошибаюсь. Заранее спасибо за помощь!

HTML

<li> 
     <!--Dance Class--> 
     <img src="images/dance.jpg" id="port-img" width="797px" height="307px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 


    <li> 
     <!--That's Not Food--> 
     <img src="images/tnf.png" id="port-img" width="797px" height="307px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--That's Not Food Pitch--> 
     <img src="images/tnf-pitch.png" id="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 


    <li> 
     <!--Coaches Corner--> 
     <img src="images/coach.jpg" id="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--Singularity2045--> 
     <img src="images/Singularity2045.png" id="port-img" width="697px" height="733px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--Overtime--> 
     <img src="images/overtime.png" id="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

</ul> 



**CSS:** 

    span.text-content { 
    /* allows me to adjust the filters and transparency of the outer span/image */ 
     background: rgba(0,0,0,0.5); 
     color: white; 
     cursor: pointer; 
     display: table; 
     font-size: 1.5em; 
     height: 300px; 
     left: 0; 
     position:absolute; 
     top: 0; 
     width: 500px; 
     opacity: 0; 
     -webkit-transition: opacity 500ms; 
     -moz-transition: opacity 500ms; 
     -o-transition: opacity 500ms; 
     transition: opacity 500ms; 
     z-index: 1; 
} 

span.text-content span { 
    /* For text alignment */ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

    ul.img-list li:hover span.text-content{ 
     opacity: 1; 
    } 

    #port-img{ 
     z-index: 1; 
     position: relative; 
     top: 69px 

    } 

Answer 1

Codepen: http://codepen.io/anon/pen/wWPpQZ

HTML

<ul class="img-list"> 

    <li> 
     <!--Dance Class--> 
     <img src="images/dance.jpg" class="port-img" width="797px" height="307px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 
<li> 
     <!--That's Not Food--> 
     <img src="images/tnf.png" class="port-img" width="797px" height="307px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--That's Not Food Pitch--> 
     <img src="images/tnf-pitch.png" class="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 


    <li> 
     <!--Coaches Corner--> 
     <img src="images/coach.jpg" class="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--Singularity2045--> 
     <img src="images/Singularity2045.png" class="port-img" width="697px" height="733px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

    <li> 
     <!--Overtime--> 
     <img src="images/overtime.png" class="port-img" width="697px" height="500px"/> 
     <span class="text-content"><span>Explanation</span></span> 
    </li> 

</ul> 

CSS

li { 
    position: relative; 
    display: inline-block; 
} 

.text-content { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    font-size: 1.5em; 
    position:absolute; 
    display: block; 
    top: 0; 
    right: 0; 
    bottom:0; 
    left: 0; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 

.text-content span { 
    display: block; 
    /* For text alignment */ 
    position: absolute; 
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%); 
    text-align: center; 
} 

.img-list li:hover .text-content{ 
    opacity: 1; 
} 

.port-img{ 
    display: block; 
} 

Объяснения

Измененного ID = "порт-IMG" в класс, как вы не должны иметь несколько элементов с одинаковыми идентификаторами.

В любом случае, самая важная часть состоит в том, что элемент li имеет положение относительно, так что все дочерние элементы, расположенные абсолютно, расположены на каждом элементе li.

Разный способ размещения текста вертикальный используется, поскольку было проще сделать пояснительную коробку высотой 100%.