Can I use an image as a mask?

Question

Can I make a regular image to mask element lying beneath it? For example I want a div element with background image with hole inside it, which will hide all elements which lying beneath it, except elements beneath the hole. Found the following example https://stackoverflow.com/a/8286622/947111 how to do this with plain color, but I doubt is it possible to replace black color by image?

P.S. Of course solution should work while page being resized.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

score 1 · Answer 1 · answered Jan 24 '17 at 18:06

Image is a bit big but here you go. Just use a transparent PNG with transparency where you want your hole. then set the background to an image rather than a radial gradient.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: url('http://www.genericorp.net/~vostek/images/circlemask-1024x768.png');
  background-size: 600px 600px;
  background-repeat: no-repeat;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

That is the issue with using an image vs vector graphics, they have to be scaled. Either create different variations of the image and switch them out depending on resolution or you can live with the potential pixelation just use percents for sizes and it will scale with the page. — Patrick Murphy, Jan 24 '17 at 18:11
I do not know why this answer got a down vote. Your original question did not ask about responsive. You have a hard width and height on the overlaying DIV, so in your answer - no, this is not responsive. — scoopzilla, Jan 24 '17 at 18:22
I didn't downvoted it, but I'll update my answer to reflect this issue — Anatoly, Jan 24 '17 at 18:47

score 0 · Answer 2 · answered Jan 24 '17 at 18:17

0

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background-image: url(http://seanrawles.work/test/Aerial_view_Sausalito-example.png);
  background-repeat:no-repeat;
  background-position:center;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

Well it seems to work.

answered Jan 24 '17 at 18:17

scoopzilla

887
5
15

Try to stay away from `background-size` – scoopzilla Jan 24 '17 at 18:18
If you'd like it to be responsive, you need to eliminate the static pixels. See this [codepen](http://codepen.io/scoopzilla/pen/YNxPjE) – scoopzilla Jan 24 '17 at 18:26
1

Wow, but I quite don't understand where do you define a circle inside? How can I change its size and x,y location? – Anatoly Jan 24 '17 at 18:52
I didn't. Same answer as the other, using a PNG. However it does **SEEM** possible - here is another answer that is similar: [Hole in Olverlay](http://stackoverflow.com/questions/20242806/hole-in-overlay-with-css) but the example does say it is not compatible on all browsers. – scoopzilla Jan 24 '17 at 18:56
This might be a good place to start. I have never used them so I cannot speak to their effectiveness: [CSS3 Masking Elements](https://www.w3.org/TR/css-masking/) – scoopzilla Jan 24 '17 at 19:00

Serg Chernata · Answer 3 · 2017-01-24T19:48:32.620

I'm actually surprised, but I got it working with mask-image which is quite widely supported. There are a few gotchas but one of the most interesting things I'm doing is creating a black to black image gradient as part of the composition instead of a second image. Thus, in the end, this solution uses only 1 image, that of a white png circle.

Besides your own set pixel sizes, all of mine use percentages to maintain responsiveness.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: #000;
  mask-image: linear-gradient(black 0%, black 100%), url(http://www.iconsdb.com/icons/preview/white/circle-xxl.png);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center center, center center;
  mask-composite: source-out;
  mask-size: 100%, 60%;
  -webkit-mask-image: linear-gradient(black 0%, black 100%), url(http://www.iconsdb.com/icons/preview/white/circle-xxl.png);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center center, center center;
  -webkit-mask-composite: source-out;
  -webkit-mask-size: 100%, 60%;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

Ah, apparently it's not fully supported in FireFox. There's workarounds but let me know if you care enough to see them. I'm just going to leave as is, if you're going with another answer. — Serg Chernata, Jan 24 '17 at 19:52

Can I use an image as a mask?

3 Answers3