CSS & jQuery - Click through image, but do register hovering

Question

I have an image at the bottom of my page (or actually, window) and it is like a rising building.

However, sometimes it overlaps page and/or footer content. This isn't a really big problem since I just added pointer-events: none;.

But I wanted to, when hovered over the image fade it out a bit so it's more obvious you can click through. But because pointer-events: none; it doesn't even register the hover action...

Is there any way I can make it click through, but actually catching the hover-trigger?

Thanks in advance!

JSFiddle

P.S. Just wondering, is there any way to actually detect hover on only the non-transparant parts of the PNG image?

Answer 1

Here's my go at it: http://jsfiddle.net/tZqQc/7/

I did the hover events on the <p> tag instead, but I think I got the same effect you wanted.

The key is the jQuery code:

$("p").mouseenter(function() {
    $( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});

$("p").mouseleave(function() {
    $( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});

and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!