Make any part of a child DIV opaque if it is outside of the area of the parent DIV without overflow:-CodePudding

I have a div inside of another div and the inner div can be sized up by the user.

Currently if they size it up then it covers over the outer div completely unless I use overflow:hidden but then they can't see the outer edges of the inner div anymore.

Ideally I would like, if the innerdiv reaches outside the boundary of the parent outerdiv, I would like anything outside of said boundary to look different, ideally just an opacity setting.

Basically I am looking for something like

overflow:opacity .3;

Currently I just have a hidden or not-hidden setting that is toggled, but it isn't ideal.

This is what it would look like with the innerdiv set to the color red. Any part of that innerdiv that is outside of the outerdiv is opaque. (The pink & red element is the same div. The full red part is the boundary of the parent/outer div.)

I have an un-working example below.

I am open to other ways of setting this up, but if it can be done with the configuration below it would be ideal.

I am fine doing this with javascript/jQuery as well.

.frame {
  width:200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
  display;block;

  margin-top:30px;
  
}


.outerdiv {
width:200px;
height:200px;
 background:gray;
 border:solid 1px #C0C0C0;
}



.innerdiv {
  width:240px;
  height:240px;
  position:absolute;
  background:red;
  margin-left:-20px;
  margin-top:-20px;
  opacity:.2
  
}

<div >
<div >
<div >

</div>
</div>
</div>

CodePudding user response：

Because the innerdiv has an absolute position, it goes outside the outer div. If the outer div had a relative position, then the inner div can not go outside of it.

CodePudding user response：

You could play around with mix-blend-mode, with the frame being bigger and with a white background.

To illustrate the idea, this rather simple snippet uses a mix-blend-mode of difference on the inner element which blends with the white background of the frame to give a sort of cyan and with the black of the outer to give the actual red.

There are several different combinations possible with mix-blend-mode. (I confess I've never found a good way of knowing exactly what effect each one will have in advance and always end up experimenting).

.frame {
  width: 100vw;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  margin-top: 30px;
  position: relative;
  background: white;
}

.outerdiv {
  width: 200px;
  height: 200px;
  background: black;
  border: solid 1px #C0C0C0;
  margin-top: 20px;
  margin-left: 20px;
}

.innerdiv {
  width: 240px;
  height: 240px;
  position: absolute;
  background: red;
  margin-left: -20px;
  margin-top: -20px;
  mix-blend-mode: difference;
}

<div >
  <div >
    <div >

    </div>
  </div>
</div>