overlay on clickable region - CSS

Question

Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?

Answer 1

Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.

http://www.w3schools.com/Css/css_image_transparency.asp

Answer 2

@thirtydot If you know of a solution that works in only one browser I still would love to here it! Although the more support the better.

You can use pointer-events: none.

Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)

http://jsfiddle.net/QC5Yw/

Answer 3

No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:

z-index:1  Content element
z-index:2  Mask/Overlay element
z-index:3  Click element

That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it. Thats why you can put a completely empty div with fixed with and height and it will be clickable.