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

Question

I have this css caption effect:
.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>
The code in itself works perfectly fine. The caption shows as expected. The only thing tho, when there's an image inside of the cell, there is a display problem when mouse hover the image as shown from my local browser run from the IDE:
The caption overlays the next cell... What could cause this? I tried to play around with the .img and the .caption but cannot seem to find a solution...
Here the full image overlay caption effect i'm trying to accomplish:
http://www.corelangs.com/css/box/caption.html

Answer 1

So the problem in your screenshot is the caption of the bottom image overlaying on top of the first image? Not sure I understand this correctly, but if so there are three simple solutions I can think about:
Increase the margin between your images / rows
On :hover, increase margin, although that could be poor UX
Increase opacity from 0.7 to 1 so it overlays, but you cannot see the first cell through it