How to create a mask over an image (not a clip-path, but the opposite)

Question

I'm trying to apply a mask to a div so I can see through it to a background image. Everything I'm seeing is about clip-paths, but I am looking for the opposite of this. Clip-paths show what is in the inside of the clip. I'm trying to have it be a mask, so that you see the outside of the clip.

Here is an example of what I am trying to achieve, and below is a full description of the example.

I have a div with a background image. Inside this div is another div that covers the full width and height of its parent (with the background image), and has a semitransparent (rgba) background color. I'm trying to add a mask to this overlay div (the one with the rgba background color) so that a circle is cut out of the middle that shows the full background image without the color overlay.

Here is a link to a jsfiddle that sets up what I am talking about, but without the mask (since I don't know how to do it).

<div class="backgroundImage">
  <div class="backgroundOverlayWithMask">
    <!-- content will be here -->
  </div>
</div>

.backgroundImage {
  width: 100%;
  height: 500px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center;
  background-size: cover
}

.backgroundOverlayWithMask {
  width: 100%;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.75);
}

I really need a crisp responsive solution to this issue that will work on standard and retina screens. The edges of the mask would get fuzzy/blurry at different screen sizes if I used an image mask. — bluebomber, Oct 04 '16 at 21:43
regardless, afaik, there's no standard way of achieving what you want with just css... i also don't think a crisp hi-res geometric shape would alias too bad, fwiw — dandavis, Oct 04 '16 at 21:44
I'm not looking for a "just css" solution. This could be css, javascript, svg, or all of the above. I've seen that svg has a tag, but I haven't found a way to get it to work. Thank you though! — bluebomber, Oct 04 '16 at 21:50
well, i guess you could generate the mask with a canvas on the fly, then export to a data/blob url you can feed CSS with. a simple circle should be easy to get running with w3fools code... — dandavis, Oct 04 '16 at 21:52
That's definitely a good try. I was playing around with options like that for a bit, but the two background images don't always line up properly because of the responsiveness. I've come to the realization that I need a true mask. — bluebomber, Oct 04 '16 at 22:03

Steven B. · Answer 1 · 2018-03-01T14:41:36.483

2

I think I have a solution using box shadow, :after, and flex. Fiddle. Based on web-tiki's answer here.

#inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
#inner:after {
  content: '';
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  align-self: center;
}
#container {
  background: url('http://via.placeholder.com/800x200');
  background-size: cover;
}

<div id="container">
  <div id="inner">
  </div>
</div>

edited Mar 01 '18 at 14:41

answered Oct 04 '16 at 22:06

Steven B.

8,962
3
24
45

Wow, that's pretty cool. Seems to be working in Chrome just fine, but not in Safari. I'll have to look into making this work across all browsers. Thanks! – bluebomber Oct 04 '16 at 22:17
@bluebomber check out the webkit extensions I added to the answer for safari. – Steven B. Oct 04 '16 at 22:36
@lamelemon still doesn't seem to be working in Safari – bluebomber Oct 05 '16 at 14:34
@bluebomber tbh I don't have a Mac or anyway to test in Safari. Is the box shadow showing at all or what exactly is happening? – Steven B. Oct 05 '16 at 15:00
@lamelemon I was able to get the mask to show on all desktop browsers by doing this: `-webkit-appearance: none; -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 10px 2000px rgba(0, 0, 0, 0.75);` You'll see that I added a 10px to only the box-shadow property. Now, I'm just not able to get it to work in iOS, but I'm looking into it. – bluebomber Oct 06 '16 at 18:53
I just had to change the one box-shadow: 0px 0px 10px 2000px rgba(0, 0, 0, 0.75); to box-shadow: 0px 0px 2000px 2000px rgba(0, 0, 0, 0.75); and it is working in Safari for both desktop and mobile. Thanks so much for your help!!! – bluebomber Oct 06 '16 at 19:46
@bluebomber awesome. Glad to be of help! – Steven B. Oct 06 '16 at 19:52

How to create a mask over an image (not a clip-path, but the opposite)

1 Answers1