Easy for you, not so for me!

bobby-morris ・

Feb 7th, 2020 12:38 PM

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, smebody viewing the page can click on the 'x' and be able to send an email to notify me. I tried serveral things, opacity, visibility, z-index but I'm obviously going about this wrong. Any solutions will be greatfully received, many thanks.

CSS:

.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; }