'Is it possible to make a transparent square on a semi-transparent background? [duplicate]

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.

htmlcsstransparency


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

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>

Solution 4:[4]

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

opaque div

  • 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);
    }

shadow box picture

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 StackTox
Solution 2 Yeshi
Solution 3 Sergiu
Solution 4

Related Questions