This is the CSS caption effect I am using:
.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>While the code functions correctly, I encountered a display issue when an image is inside the cell and mouse hovers over it in my local browser run from the IDE:
The problem is that the caption overlays the next cell... I have tried adjusting the `.img` and `.caption` properties but so far haven't found a solution...
I am aiming for a full image overlay caption effect like this: