CODEWITHSUNDEEP
javascriptjqueryhtmlcssmask
bluebomber
bluebomber

Reputation: 51

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

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);
}

Upvotes: 4

Views: 1022

Answers (1)

Steven B.
Steven B.

Reputation: 9362

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>

Upvotes: 2

Related Questions