Home/ Questions/Q 6366739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:27:37+00:00

I’ve been playing around with blocking out other divs on button press, and Block

  • 0

I’ve been playing around with blocking out other divs on button press, and Block UI is a very nice tool, however it creates rectangular blocks around divs which doesn’t really look good, so I was wonering if it was possible to do a “field of view” type block with jquery like the one in the image below.

enter image description here

Thanks so much 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is simply a matter of making an alpha masked image (png). They key is to avoid making it jumbo size to cover the whole page. Instead make a frame of opaque (or more opaque) divs surrounding the png of the “hole”.

    This way, your image does not have to be huge and you can adjust to any screen size automatically. The parent div would be of width/height 200%, or if you want to get fancy, you could simply have the height/width be 100%, and use some fancy math in JS to dynamically size the divs as the port moves.

    ================
|     div      |
================
|div| port |div|
================
|     div      |
================

    See my answer to a similar question here:

    CSS see through porthole

    • 0