Transition沒有正確對齊

Question

我試圖讓它在您將鼠標懸停在圖像上時獲得項目的解釋。如果我將span.text-content位置設置爲絕對位置，則所有列表項都會正確對齊，但我在左上角會看到一個框，並且一旦滾動到較低圖像時我就看不到它。

當我將位置設置爲相對位置時，它將所有圖像分開，文本框出現在圖像的左側和下方，但至少每個圖像都有一個。我一直在玩z-index，因爲起初，你只能看到「解釋」這個詞作爲頂級圖像背後的一條條。

最後，my -o-transition不會變灰，我不確定這是什麼意思？我檢查了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」，以班爲你不應該有相同ID的多個元素。

無論如何，最重要的部分是li元素具有相對位置，所以所有的子元素絕對定位到每個li元素。

使用verticaly的不同位置來定位文本，因爲它更容易使解釋框100％的高度。