Question

我试图制作它，以便在将鼠标悬停在图像上时获得对项目的解释。如果我将span.text-content位置设置为绝对，我的所有列表项都会正确对齐，但是我在左上角有一个框，一旦我滚动到较低的图像，我就看不到它了。

当我将位置设置为相对时，它会分离我的所有图像，文本框出现在图像的左侧和下方，但至少我为每个图像得到一个。我一直在玩z-index，因为一开始你只能看到＆＃34;解释＆＃34;作为顶部图像背后的条子。

最后，我的过渡不会变得灰暗，我不知道那是什么意思？我检查了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 =“port-img”更改为class，因为您不应该有多个具有相同ID的元素。

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

使用不同的方式来定位文本verticaly，因为更容易使解释框100％高度。

转换未正确对齐

1 个答案: