Opaque Semi-transparent overlay with transparent circle

Question

I'm trying to add a semi-transparent black overlay on the site except for a transparent circular area. Image bellow.

I have tried with different parent-children relationships and opacity settings without success. Is there a way to do with css or javascript?

Edit: This is the code I'm working on. The black circle should be transparent. https://jsfiddle.net/f47oto4o/

html:

<div>
  <p>
   This should be shown
  </p>
</div>
<div class="overlay">
   <div class="transparent-circle"></div>
</div>

css:

p {
  margin-top: 200px;
  text-align: center;
}

.overlay {
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.transparent-circle {
  position: absolute;
  top: 160px;
  left: 50%;
  height: 100px;
  width: 100px;
  background: rgba(0,0,0,1.0);
  z-index: 2;
  border-radius: 100%;
}

Edit 2: Should this be marked as a duplicate? The problem is stated in terms of opacity and transparency rather than cutting holes in divs. This is why I couldn't find a solution to my question originally.

Hi. Can you provide the html and css code your working with. — Web Dev Guy, Feb 06 '17 at 11:06
This answer should help too : http://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle — web-tiki, Feb 06 '17 at 11:35

score 6 · Accepted Answer · answered Feb 06 '17 at 11:11

You can achieve this by create a circle with large box-shadow values:

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  height: 150px;
  width: 150px;
}

* {box-sizing: border-box;}

body {
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

.popup {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  overflow: hidden;
  display: flex;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  display: flex;
  height: 150px;
  width: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<p>
  Lomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit amet
</p>
<div class="popup">
  <div class="circle">
    <button type="button" class="btn btn-success">Add Service</button>
  </div>
</div>

This is simple and worked for the specific case I wanted! Thank you. — ieldanr, Feb 06 '17 at 11:27

Opaque Semi-transparent overlay with transparent circle

1 Answers1