overlay with transparent square inside

Question

right now I have something like the following as seen below. I want the square to be transparent, meaning there is an "overlay" effect for the background, but a transparent square so I can view the items below it.

May I ask if this is possible to implement?

.overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

.square{
  height: 100px;
  width: 100px;
  border: solid lime 1px;
  background-color: transparent !important; 
}

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

Do you mean that you want to have a transparent "hole" i the `div.overlay` where the square is ? — TheEagle, Mar 06 '21 at 12:33
yes.. meaning that the square would be a transparent part of the overlay — Max, Mar 06 '21 at 12:36
Use `box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3);` on the square — , Mar 06 '21 at 12:39

Paulie_D · Answer 1 · 2021-03-06T12:45:03.157

Just use a giant box-shadow like this -

.overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: green;
  overflow:hidden;
}

.square{
  height: 100px;
  width: 100px;
  border: solid lime 1px;
  box-shadow: 0 0 0 500px red;

}

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

In fact you don't need the square div at all if you use an inset box-shadow

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: green;
  overflow: hidden;
  margin: 1em auto;
  box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 1);
}

<div class="overlay">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae saepe hic sequi eveniet iusto est corrupti commodi porro! Dignissimos provident voluptas numquam iste corrupti at?</p>
</div>

this is an interesting solution ! – Max Mar 06 '21 at 12:41 — Max, Mar 06 '21 at 12:41

score -1 · Answer 2 · answered Mar 06 '21 at 12:40

-1

Yes, this is possible, you can use the new clip-path CSS property, or box-shadow. See this question's answers for some examples, they are really great !

answered Mar 06 '21 at 12:40

TheEagle

5,808
3
11
39

Thank you! will look it up, had some issues finding a similar topic on SO and decided to post after many failed search attempts... – Max Mar 06 '21 at 12:44
@Max no problem, but please do not forget to accept the answer that helped you the most (does not have to be mine, of course) ! – TheEagle Mar 06 '21 at 12:45
This is really a comment, not an answer. – Paulie_D Mar 06 '21 at 12:45

overlay with transparent square inside

2 Answers2