Html 过渡段未正确对齐

我想让你在图片上看到我的项目的解释。如果我将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

     }

<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:**
span.text-content{
/*允许我调整外部跨距/图像的过滤器和透明度*/
背景：rgba（0,0,0,0.5）；
颜色：白色；
光标：指针；
显示：表格；
字号：1.5em；
高度：300px；
左：0；
位置：绝对位置；
排名：0；
宽度：500px；
不透明度：0；
-webkit转换：不透明度500ms；
-moz转换：不透明度500ms；
-o-转变：不透明度500ms；
过渡：不透明度500ms；
z指数：1；
}
span.text-content span{
/*用于文本对齐*/
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
ul.img-list li：悬停span.text-content{
不透明度：1；
}
#港口img{
z指数：1；
位置：相对位置；
顶部：69px
}

代码笔：

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

     }

<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>

解释

将id=“port img”更改为class，因为您不应该有多个具有相同id的元素

无论如何，最重要的部分是li元素具有相对位置，因此所有绝对定位的子元素都定位到每个li元素

使用不同的垂直定位文本的方法，因为更容易使解释框达到100%的高度。

代码笔：

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

     }

<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>

解释

将id=“port img”更改为class，因为您不应该有多个具有相同id的元素

无论如何，最重要的部分是li元素具有相对位置，因此所有绝对定位的子元素都定位到每个li元素

---

使用不同的方式垂直定位文本，因为解释框100%高更容易。

您能提供代码示例或代码笔让我们看到吗？我不确定我是否完全理解你的解释。此外，您还提到了-o-transition。这个问题在Opera中特别存在吗？欢迎来到stack overflow:-）请查看以及如何创建一个。这将有助于变得有用answers@user5775386不，不是特定于Opera的。您能提供一个代码示例或代码笔让我们看到它吗？我不确定我是否完全理解你的解释。此外，您还提到了-o-transition。这个问题在Opera中特别存在吗？欢迎来到stack overflow:-）请查看以及如何创建一个。这将有助于变得有用answers@user5775386不，不是特定于歌剧。我接受了你的答案，因为你的解决方案在CodePen上非常有效。我完全复制了它，现在我能在我的页面上看到的是一个非常大的框，当我在页面上方悬停时，它的中心写着“解释”。如果我向下滚动页面，我就看不到了。我更改了一些图片文本来测试它，但仍然只看到“解释”。当我在代码中添加“img list li”时，我所有的图片都完全消失了。所有这些都告诉我，问题在我的代码中更为突出。谢谢你的帮助。@Shelly你有

li{position:relative；}

吗？另外请注意，如果页面上有其他li元素，最好将一些类添加到希望受影响的类中，并将li更改为该类选择器。是的，我有该代码，我有类，因为我的navMenu也是一个li。但是，我没有正确的类语法。忘了“.”！所以，谢谢你；我的照片又出现了。我将不得不重新检查代码，看看是否能让它工作（没有时间，atm）。我接受了你的答案，因为你的解决方案在CodePen上工作得非常完美。我完全复制了它，现在我能在我的页面上看到的是一个非常大的框，当我在页面上方悬停时，它的中心写着“解释”。如果我向下滚动页面，我就看不到了。我更改了一些图片文本来测试它，但仍然只看到“解释”。当我在代码中添加“img list li”时，我所有的图片都完全消失了。所有这些都告诉我，问题在我的代码中更为突出。谢谢你的帮助。@Shelly你有

li{position:relative；}

吗？另外请注意，如果页面上有其他li元素，最好将一些类添加到希望受影响的类中，并将li更改为该类选择器。是的，我有该代码，我有类，因为我的navMenu也是一个li。但是，我没有正确的类语法。忘了“.”！所以，谢谢你；我的照片又出现了。我将不得不重新检查代码，看看是否能让它工作（没有时间，自动取款机）。