是什么导致css标题覆盖此表中的另一个图像？

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

因此，屏幕截图中的问题是底部图像的标题覆盖在第一张图像的顶部？我不确定我是否正确理解这一点，但如果是这样，我可以考虑三个简单的解决方案：

• 增加图像/行之间的边距
• 开启：悬停，增加利润率，虽然这可能是糟糕的用户体验
• 将不透明度从0.7增加到1，使其覆盖，但您无法通过它看到第一个单元格