ieldanr ieldanr - 4 years ago 159
CSS Question

Opaque Semi-transparent overlay with transparent circle

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

enter image description here

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download