How to make background overlay?

Question

I'm interested in how to make an overlay over the background of a layer of a certain color with a transparent part as in this layout. Maybe someone knows good ways to implement this, so I'll ask you to help make a similar background overlap.

What I'm talking about is in the header of the site. Layout link: https://www.figma.com/file/VCBhj0WljD20IzHilnjMSJ/PrivateJetBooking?node-id=0%3A1

I will specify, the color filter is imposed on a background, however the certain area remains without this filter, how to make it?

Answer 1

You can achieve it by using box-shadow as overlay white, and element will become a porthole like that:

.background {
  width: 100%;
  height: 300px;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.hole {
  width: 120px;
  height: 200px;
  position: absolute;
  top: 50px;
  right: 100px;
  border: 10px solid white;
  border-radius: 80px;
  box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 80%);
}

<section class="background" style="background-image: url('https://images.pexels.com/photos/62623/wing-plane-flying-airplane-62623.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260')">
  <div class="hole"></div>
</section>