Attempting to put a small 'x' (25x25px PNG) over the top of a thumbnail image on hover. The purpose is that if there is a dead product link, somebody viewing the page can click on the 'x' and be able to send an email to notify me. I tried several things, opacity, visibility, z-index but I'm obviously going about this wrong.
CSS:
HTML :
Any solutions will be gratefully received, many thanks.
CSS:
Code:
.product {
position: relative;
width: 150px;
height: 200px;
z-index: 1
}
.product:hover .report {
z-index: 2
}
.report {
position: absolute;
top: 2px;
right: 2px;
opacity: 0
}
#Border {
border-style:solid;
border-width:1px;
}
HTML :
Code:
<td class="product">
<img src="images/thumbs/product001.jpg" alt="Product-Name" width="150" height="200" id="Border" title="Product-Title" />
<div class=report>
<a href="mailto:[email protected]?Invalid Product Link" title="Click here to report dead link"><img src="images/x.png" class="report"/></a>
</div>
</td>
Any solutions will be gratefully received, many thanks.