Is there a way to make a semi-transparent div with dynamically placed “holes”

Question

I'm creating a page with 2 layers: an image layer and a "mask" layer on top of it which is semi transparent. I want to dynamically place a small rectangle "hole" in that mask so that the original image below it could be seen in that area.

Is this possible?

The final purpose a is to create an effect of a grayed out image that when the mouse hovers over certain hot areas these areas become "vivid". Unfortunately these areas are not consecutive and it is not too easy to create the div of the complement.

Thanks! Amit

Answer 1

Some thing like this?

http://deepliquid.com/projects/Jcrop/demos.php

Answer 2

OK, here is one solution I found. Create a wrapper div with relative positioning (to catch the absolute positioning of the hot areas). Put the image on the bottom layer. Put a semi transparent div on the middle layer. Put all those "hot area" divs ("holes") on the top layer (absolute positioning), with no background (fully transparent). Then for the hot areas' :hover pseudo class, use background image the same as the image at the bottom layer, and set the background position to be -left -top (the negatives of the absolute position of the divs).

This will create the desired effect, ie a grayed out image with a portion of the original image displayed when hovering on the "hot area".

My only hope is that it doesn't screw up browser performance for setting the background positioning of a 400K image on so many divs (I have around 50 of those)..