Question

当试图将文本悬停在表格中的图像上时，我尝试添加一种效果。我已经将其单独与图像配合使用，但是当我尝试将其应用于表格元素时，它将不起作用。当我将鼠标悬停在图像上时，什么也没有发生。我觉得我在安排一些错误。不能在表格中做吗？

代码如下：

table {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 50px;
  border-collapse: separate;
}

td {
  max-width: 150px;
  max-height: 150px;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

<table>
  <tr>
    <th>Cat 1</th>
    <th>Cat 2</th>
    <th>Cat 3</th>
  </tr>
  <tr>
    <div class="container">
      <td class="cat1"><img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg" height="150px" width="150px"></td>
      <div class="overlay">
        <div class="text">Overlay Text</div>
      </div>
    </div>
    <td class="cat2"><img src="https://static1.squarespace.com/static/53a096cce4b00d7644776a0b/562b9546e4b016f977a96bd7/562b975fe4b01024eb5d7267/1445697377179/Shake_11_Lil+Bub.jpg?format=1500w" height="150px" width="150px"></td>
    <td class="cat3"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" height="150px" width="150px"></td>
  </tr>
</table>

提琴： https://jsfiddle.net/megmun/f7esrn0t/

Answer 1

最大的问题是将div放置在TD元素周围。 CSS几乎可以，但是这里有个提示：

位置：绝对元素将被约束在其他位置非静态元素（相对，其他绝对和固定）中，因此，对于您的TD包含绝对覆盖，它必须为< strong>相对。

.grid {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 50px;
  border-collapse: separate;
}

.grid td {
  position: relative;
  max-width: 150px;
  max-height: 150px;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  background-color: #008CBA;
  z-index: 1000;
}

.grid td:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

<table class="grid">
  <tr>
    <th>Cat 1</th>
    <th>Cat 2</th>
    <th>Cat 3</th>
  </tr>
  <tr>

    <td>

      <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg" height="150px" width="150px" />

      <div class="overlay">
        <div class="text">Overlay Text</div>
      </div>
    </td>

    <td><img src="https://static1.squarespace.com/static/53a096cce4b00d7644776a0b/562b9546e4b016f977a96bd7/562b975fe4b01024eb5d7267/1445697377179/Shake_11_Lil+Bub.jpg?format=1500w" height="150px" width="150px" /></td>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" height="150px" width="150px" /></td>
  </tr>
</table>

编辑：

忘记提及：您还必须注意供应商特定的属性，例如过渡和转换。

如何将文字淡入淡出效果应用于表格中的图像？

1 个答案: