Is it possible to make a transparent square on a semi-transparent background?

Question

My goal is to achieve something similar to sunset highlighted .
This example image uses 4 semi-transparent black squares, on the right, left, top and bottom to simulate the effect I'm after

Using code that looks somewhat like this:

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

.overlay {
  position: absolute;
  background-color: #0005;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.transparent-box {
  background-color: #fff0;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 80px;
}

<!DOCTYPE html>
<html>
    <body>
      <div class="wrapper">
        <img src="https://picsum.photos/400/200" alt="">
        <div class="overlay">
          <div class="transparent-box"></div>
        </div>
      </div>
    </body>
</html>

I would like to be able to get this effect with while using oneelement for the background and one element making the "window" so that for example adding rounded courners and similar styling could be done easier.
I've tried playing around with blend modes, but I'm not sure if it doesn't support that or if I've just set it up wrong.

While editing your question I have noticed your colors have 4 digits. Colors in CSS have usually 3, 6 or 8 digits normally. Details here: [MDN - color in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color). — Peter Krebs, Apr 11 '22 at 08:19
Just to be clear - are you basically trying to 'cut a hole' in the foreground (the semi transparent black)? Have you looked at masking? — A Haworth, Apr 11 '22 at 08:22
https://www.geeksforgeeks.org/css-4-digit-hex-color/ @PeterKrebs — UPinar, Apr 11 '22 at 08:28
Change opacity of your transparent-box use `background-color: #fff9;` @PeterKrebs it works i think — UPinar, Apr 11 '22 at 08:33
Oh okay that's the error in Adne's post. Thanks for the explaination. — Peter Krebs, Apr 11 '22 at 08:34
@AHaworth Correct, I have looked a bit into masking and clip-path, but I haven't been able to get the effect I wanted. StackToxs suggestion bellow worked, so I think I'll spare myself going further into that for now. But thanks for the suggestion! — Mollux, Apr 11 '22 at 09:28
@PeterKrebs 4 digit colors are shorthand for 8 digits in the same way 3 digit is shorthand for 6 digit. It's #rgba instead of #rrggbbaa. It is supported by the browser, but it looks like stack overflows syntax higlighting doesn't recognize it. — Mollux, Apr 11 '22 at 09:32

score 2 · Accepted Answer · answered Apr 11 '22 at 08:16

2

A nice trick to get the same effect, is to use a box-shadow on the overlay:

.overlay {
    box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}

In this case, 100vmax fills up the whole page.

answered Apr 11 '22 at 08:16

StackTox

36
2

I put the shadow on .transparent-box with `overflow: hidden` on .overlay and I got exacly the effect I was looking for. Thanks! – Mollux Apr 11 '22 at 08:47

Leonardo Repolust · Answer 2 · 2022-04-11T09:01:16.923

1

if you change the opacity of your transparent-box (div) and set the color to white, you will get the translucent effect that you showed in your example link.

//css of transparent-box linked below

        .transparent-box {
          background-color: white;
          opacity: 0.6;
          position: left;
          top: 50px;
          left: 50px;
          width: 100px;
          height: 80px;
        }

if you want a shadow around and in the middle the normal picture you need to use the shadow box:

    .transparent-box {
        opacity: 0.9;
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 80px;
        box-shadow: 0 0 0 100pc rgba(0, 0, 0, .8);
    }

edited Apr 11 '22 at 09:01

answered Apr 11 '22 at 08:17

Leonardo Repolust

143
1
10

Not quite. The effect I'm going for is a box that is compleatly transparent that also effects the overlay. – Mollux Apr 11 '22 at 08:41
1

if you want a shadow around and in the middle the normal picture you need to use the shadow box – Leonardo Repolust Apr 11 '22 at 09:01

score 1 · Answer 3 · answered Apr 11 '22 at 08:18

you could use two images with the background fixed property to create a similar effect. Check this fiddle link jsfiddle

  $(".transparent-box").draggable();

.overlay {
  height: 300px;
  width: 300px;
  background-image: linear-gradient(0deg, #464646fc, #383333ab), url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.transparent-box {
  height: 30%;
  width: 30%;
  background-image: url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
    <div class="overlay">
      <div class="transparent-box"></div>
    </div>
</body>

</html>

That's a very interesting solution, but I think it might be a bit over the top for my purpouses. — Mollux, Apr 11 '22 at 09:40

score 0 · Answer 4 · answered Apr 11 '22 at 08:15

0

Everything was right, except for the colors. I just changed the background and that's it.

I hope that's what you wanted

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}
.overlay {
  background-color: #0000003b;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.transparent-box {
  background-color: #ffffff78;
  position: absolute;
  top: 4rem;
  left: 50px;
  width: 100px;
  height: 80px;
}

<div class="wrapper">
  <img src="https://picsum.photos/400/200" alt="">
  <div class="overlay">
    <div class="transparent-box"></div>
  </div>
</div>

answered Apr 11 '22 at 08:15

Sergiu

356
2
10

Not quite, this creates a white square with an opacity of 78. I want to create a square that has an opacity oc 0 that also affects the overlay. – Mollux Apr 11 '22 at 08:39
@Ådne-e-moldesæter ok, but if you use the color `# fff0` you will not be able to have the effect you want, the color `# fff0` is transparent meaning that the color is not visible is ZERO – Sergiu Apr 11 '22 at 08:50
That is the effect I'm after. The picture in my question doesn't have a white rectangle with a low opacity. It is everywhere other than that rectangle that has a black color with a low opacity. Though I might not have been clear in explaining that. – Mollux Apr 11 '22 at 09:36

Is it possible to make a transparent square on a semi-transparent background?

4 Answers4