Transition not aligning properly - html

Question

I'm trying to make it so that you get an explanation of my project when you hover over the image. If I set the span.text-content position to absolute, all of my list items align properly, but i get one box in the upper left corner and I can't see it at all once I scroll to lower images.
When I set the position to relative, it separates all of my images and the text box appears on the left side and below the image, but at least I get one for every image. I've been playing with the z-index because, at first, you could only see the word "Explanation" as a sliver behind the top image.
Finally, my -o-transition won't gray out and I'm not sure what that's about? I've checked jshint and I'm not throwing any errors. Thanks in advance for the help!
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;
}
Explanation
Changed id="port-img" to class as you should not have multiple elements with same id.
Anyway the most important part is that li element have position relative so all child elements positioned absolutely are positioned to each li element.
Different way to position text verticaly is used as it was easier to make explanation box 100% height.