Put image over the top of another image on hover

Discussion in 'HTML and CSS' started by SpongeRob, Feb 7, 2020.

  1. SpongeRob

    SpongeRob

    Joined:
    Feb 7, 2020
    Messages:
    3
    Likes Received:
    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 (Text):

    .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 (Text):

    <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:somebody@here.com?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.
     
    SpongeRob, Feb 7, 2020
    #1
    1. Advertisements

  2. SpongeRob

    SpongeRob

    Joined:
    Feb 7, 2020
    Messages:
    3
    Likes Received:
    0
    SpongeRob, Feb 9, 2020
    #2
    1. Advertisements

  3. SpongeRob

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    102
    Likes Received:
    12
    You probably have it by now but:
    Code (Text):

    <!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:somebody@here.com?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>
     
     
    sunfighter, Feb 13, 2020
    #3
    SpongeRob likes this.
  4. SpongeRob

    SpongeRob

    Joined:
    Feb 7, 2020
    Messages:
    3
    Likes Received:
    0
    You sir, are a star.. Thank-you very much!
     
    SpongeRob, Feb 13, 2020
    #4
    1. 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 (here). After that, you can post your question and our members will help you out.