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?

Felix Htoo · Accepted Answer · 2022-04-03T19:23:51.447

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>

Really good way to implement through the shadows, thank you so much for your help — Vitaliy, Apr 03 '22 at 18:58

kess · Answer 2 · 2022-04-03T19:15:30.673

I managed to come up with a solution. It's not very elegant but it works.

body, html {
  padding: 0;
  margin: 0;
}
:root {
  --window-width: 100px;
  --right: calc(var(--window-width) + 80px);
  --window-height: 160px;
  --section-height: 300px;
  --section-width: 100vw;
}
.container {
  width: var(--section-width);
  height: var(--section-height);
  position: relative;
}
.bg, .inner-bg {
  background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80");
  background-size: cover;
  background-position: center;
  width: var(--section-width);
  height: var(--section-height);
}
.inner-bg {
  position: absolute;
  transform: translate(calc(-1 * calc(var(--section-width) - var(--right))),calc(calc(var(--window-height) / 2) - calc(var(--section-height) / 2)));
  top: 0;
  left: 0;
}
.inner-overlay {
  /*background-color: rgba(0, 0, 255, 0.1);*/
  /*blue tint in window*/
  width: 100%;
  height: 100%;
}
.bg {
  
}
.overlay {
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 100%;
}
.window {
  outline: 5px solid white;
  border-radius: 40px;
  width: var(--window-width);
  height: var(--window-height);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--section-width) - var(--right));
  overflow: hidden;
}

<div class="container">
  <div class="bg">
    <div class="overlay">
    </div>
  </div>
  <div class="window">
    <div class="inner-bg">
      <div class="inner-overlay">
      </div>
    </div>
  </div>
</div>

Hmm, also a good option, I see you used 2 times the background image) I also wanted to do this, but the person above suggested the best option — Vitaliy, Apr 03 '22 at 20:08

score 1 · Answer 3 · answered Apr 04 '22 at 05:28

Easy way to do it. You can try with below code.

<style>

  .main-div {
  width: 100%;
  height: 350px;
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05");
  background-position: center;
  background-size: cover;
}

.inner-div {
  width: 130px;
  height: 200px;
  position: absolute;
  top: 70px;
  right:100px;
  border: 10px solid white;
  border-radius: 80px;
  box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 75%);

}
</style>

<div class="main-div">
    <div class="inner-div"></div>
</div>

score 0 · Answer 4 · answered Apr 03 '22 at 18:15

0

How about using display:grid it helped me with overlaying transparant image over the background one.

answered Apr 03 '22 at 18:15

Nicik

60
6

a little misunderstood you. I will specify, the color filter is imposed on a background, however the certain area remains without this filter how to make it? – Vitaliy Apr 03 '22 at 18:19
yeah I might have misunderstood the question. though if the image you mentioned is the one shown in the link why not download it specifically from figma? I don't know if you can do what you want in css. – Nicik Apr 03 '22 at 18:26
From what I see in the figma files, you can download all the images and use layouts in css to format them however you want. the `display:grid` might help you with that. specifically `grid-row:1 /2` specification on all child elements of the parent element. – Nicik Apr 03 '22 at 18:29
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 04 '22 at 00:07

How to make background overlay?

4 Answers4