How to cut a part of div

Question

I try to give you a broad picture of my problem. Suppose I have a overlay div on my page with z-index: 99;, with background-color: rgba(0,0,0,0.5). Then I want to remove a part of overlay div, for example 100 x 100px in top: 50px; and left: 200px;.

By removing I mean that exclude a part of overlay div to make that part visible and remove the background-color from that.

How can I do that?

I guess it comes to masking of certain part of `
` and clone it with same element (or background) so it appears to be clipped. Bet you can get the idea from Flipboard inspired project http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/ with demo here (http://tympanus.net/Development/FlipboardPageLayout/?page=0) — Ikmal Ezzani, Mar 10 '13 at 07:06

score 3 · Accepted Answer · edited Sep 24 '18 at 16:13

3

I'm not sure you can remove part of the background like you describe. Instead, your overlay can have a transparent background and it can contain four blue-ish-background divs that form a frame around the hole you want.

Here's some code that does this:

body {margin: 0; padding: 0}
#main {width: 500px; height: 200px; background: yellow;}
.overlay {background: rgba(0,0,0,0.5); position:absolute;}
#overlay-container { width: 500px; height: 200px; z-index: 99; position: absolute;}
#top {width: 100%; height: 50px}
#left {top:50px; width: 200px; height: 100px}
#right {left: 300px; width: 200px; height: 100px}
#bottom {left: -300px; top: 100px; width: 500px; height: 50px}

<div id="main"/>
<div id="overlay-container">
    <div class="overlay" id="top"/>
    <div class="overlay" id="left"/>
    <div class="overlay" id="right"/>
    <div class="overlay" id="bottom"/>
</div>

You can probably get rid of the overlay-container and simplify things a bit.

For the overlay, you could just use a <div> with a transparent background and a translucent border. Here's another example:

body { margin: 0; padding: 0; }
#background {
    width:500px;
    height:200px;
    background: yellow;
}
#overlay {
    border-color: rgba(0,0,0,0.5);
    border-style: solid;
    border-top-width: 50px;
    border-left-width: 200px;
    border-right-width: 200px;
    border-bottom-width: 50px;
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
}

<body>
    <div id="background">some content</div>
    <div id="overlay"></div>
</body>

edited Sep 24 '18 at 16:13

TylerH

20,799
66
75
101

answered Mar 10 '13 at 07:01

Ted Hopp

232,168
48
399
521

What about the circles? – Muhammad Osama Sep 16 '19 at 18:30
1

@MuhammadOsama -- What circles? If you want a circular background, you can probably do some tricks using the `border-radius` property. Take a look at [this question](https://stackoverflow.com/q/8709291/535871). – Ted Hopp Sep 16 '19 at 20:16
@TedHopp is there any way to create the same thing with border radius?! – Pouya Jabbarisani Jan 15 '21 at 12:38
@PouyaJabbarisani - As I said in my comment just above yours, you can probably play around with the `border-radius` property. See the question I linked to in the comment. – Ted Hopp Jan 15 '21 at 13:04
@TedHopp yes, thanks. actually, I was looking for the first example. so one question: as you know, pointer-events: none will make it clickable from the inside, but I need to somehow also prevent from clicking underlying items from outside, is there any way to do that? (consider it as a walkthrough tour for website which user should only able to click inside of focused area) – Pouya Jabbarisani Jan 15 '21 at 13:12
@PouyaJabbarisani You could probably use a transparent div (with dimensions set explicitly instead of by the contents) to trap any clicks. See [this question](https://stackoverflow.com/questions/16348725/can-i-make-a-div-transparent-but-clickable), for instance. – Ted Hopp Jan 15 '21 at 15:26

score 0 · Answer 2 · edited Jun 16 '17 at 06:45

You have to do something like in Ted's example. You could use JavaScript to calculate the rectangle of the element to mask and use that info to position the overlay elements.

Here is a quick example using jQuery,

Fiddle

An alternative is to use a html canvas with the clearRect method,

Fiddle

The caveat with the canvas solution is that the canvas is overlayed over the element so it is not possible to eg. mouse select the content in the div etc.

How to cut a part of div

2 Answers2