遷移が正しく整列していない

Question

イメージの上にマウスを置くと、私のプロジェクトの説明が得られるようにしようとしています。私がspan.text-contentの位置をabsoluteに設定した場合、リストアイテムはすべて正しく整列しますが、左上隅に1つのボックスが表示され、下位の画像にスクロールすると表示されません。

位置を相対に設定すると、すべての画像が区切られ、テキストボックスが画像の左側と下に表示されますが、少なくとも画像ごとに1つずつ表示されます。私はZインデックスを使って遊んできました。なぜなら、最初は、「説明」という言葉がトップイメージの後ろにあるスライバーとしてしか見ることができなかったからです。

最後に、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を持つ複数の要素を持つべきではないと説明

変更されたIDクラス= "ポート-IMG"。

いずれにしても、最も重要な部分は、li要素が絶対的に配置されたすべての子要素が各li要素に配置されるように相対位置を持つということです。

テキストを垂直に配置する別の方法は、100％の高さの説明ボックスの作成が簡単だったので使用されます。