是什么导致 css 标题覆盖此 table 中的另一张图片？

Question

我有这个css字幕效果：

.cell {
  position: relative;
  width: 180px;
  height: 180px;
}
.caption {} .cell .caption {
  opacity: 0;
  text-decoration-color: gray;
  text-align: center;
  background: #eaeaea;
  position: absolute;
  font-weight: bold;
  width: 180px;
  height: 180px;
}
.cell:hover .caption {
  box-shadow: 0 5px 2px #777;
  cursor: pointer;
  opacity: 0.7;
}

<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">

  <c:forEach var="product" items="${categoryProducts}" varStatus="iter">

    <td>
      <tbody>
        <tr>
          <td style="vertical-align: middle; width: 180px; text-align: center; height: 180px;" class="cell">
            <a href="product?${product.id}">



              <img class="img" alt="" src="${initParam.productImagePath}${product.name}.jpg" />

              <div class="caption">
                <br>view details</div>

            </a>
            <br>
            </div>
          </td>
          <td style="vertical-align: middle; width: 140px; text-align: center;">${product.name}
            <br>
          </td>
          <td style="vertical-align: middle; width: 125px; text-align: center;">$ ${product.price}
            <br>
          </td>
          <td style="vertical-align: middle; width: 125px; text-align: center;">

            <form action="addToWishlist" method="post">
              <br>
              <br>
              <input name="productId" value="${product.id}" type="hidden">

              <input class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
            </form>
            <br>
          </td>
          <td style="vertical-align: middle; width: 123px; text-align: center;">


            <form action="addToCart" method="post">
              <br>
              <br>

              <input name="productId" value="${product.id}" type="hidden">
              <input class="submit" value="<fmt:message key='AddToCart'/>" type="submit">


            </form>
            <br>
          </td>
        </tr>
      </tbody>
  </c:forEach>
</table>

代码本身工作得很好。标题按预期显示。唯一的问题是，当单元格内有图像时，鼠标悬停图像时会出现显示问题，如我的本地浏览器运行来自 IDE:

标题覆盖了下一个单元格...这可能是什么原因造成的？我尝试使用 .img 和 .caption 但似乎找不到解决方案...

这是我要实现的完整图像叠加字幕效果： http://www.corelangs.com/css/box/caption.html

Answer 1

所以你截图中的问题是底部图片的标题覆盖在第一张图片上？不确定我是否理解正确，但如果是的话，我可以考虑三个简单的解决方案：

增加图像/行之间的边距
在 :hover 上，增加边距，尽管这可能是糟糕的用户体验
将不透明度从 0.7 增加到 1，使其覆盖，但您看不到第一个单元格

是什么导致 css 标题覆盖此 table 中的另一张图片？

What causes a css caption to overlay another image in this table?

html

css

hover