Interactive Overlay - CSS

Question

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

Answer 1

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

You can use pointer-events: none .

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

http://jsfiddle.net/QC5Yw/

Answer 2

Wrap the overlay and background in an interactive div and set the overlay opacity attribute to something less than 1.

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

Answer 3

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

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

This is because the browser cannot tell where your PNG is transparent. It just takes it as an image and does not miss focus if it has transparent pixels. This is why you can put a completely empty div with fixed and height, and it will be clickable.