Put image over the top of another image on hover


Joined
Feb 7, 2020
Messages
3
Reaction score
0
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:

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.
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
127
Reaction score
19
You probably have it by now but:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    position: relative;
    width: 190px;
}
.image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
.container:hover .showOnHover {
    display: inline-block;
}
.showOnHover {
    position: absolute;
    top: 2px;
    right: 2px;
    color: white;
    font-size: 16px;
    display: none;
}
</style>
</head>
<body>

<h2>Opacity with Box</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
    <img src="http://www.tagindex.net/css/img/image/photo.jpg" alt="Test" class="product" id="Border" title="Test" /> <!-- This get the image size from the product class -->
                                                              
        <div class="showOnHover">
            <a href="mailto:[email protected]?Fish Invalid Link" title="Click here to report dead link"><img src="https://i.postimg.cc/FFfy5dGN/x.png" class="showOnHover"/></a>
        </div>
</div>
</body>
</html>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top