Question

This is hard to explain, but I will try. I have a background image in CSS, and then I have a table over the top of it, which has a white background. So you can’t see the background in CSS.

But the effect I want is to be able to hover over a circular image or shape which then reveals the background in that small area.

A way to visualise this, I have a photo on the table, I put a piece of paper over the image so none of the image is in view. I now cut a hole in the paper so I can then see the photo through that hole. Plus as I move the paper around the image behind changes as I looking at a different part.

This is used here http://www.thebestdesigns.com/2012/05/18/andy-chak/ with the letters going through to the background.

Any ideas would be great, but I under stand if this is not possible.

Answer 1

Instead of putting a background colour on the whole table you could put the background colour on the individual table cells.

td, th { background:#fff; }

Then when you hover over a table cell:

td:hover, th:hover { background:none; }

Or if you wanted to show larger areas you could add a class onto a cluster of cells then do the same as above to turn off the background on that cluster of cells which all have a specific class:

td.my-class-name:hover, th.my-class-name:hover { background:none; }

Obviously this is not circular shapes but a possible solution anyway.