My inner div can be resized by the user, and I have it inside another div. The issue is that when the inner div extends beyond the outer div, it covers it completely, or I have to use overflow:hidden, which hides the outer edges of the inner div.
Ideally, I want the part of the inner div that exceeds the boundary of the outer div to have a different look, maybe just an opacity setting.
Something like this:
overflow:opacity .3;
Currently, I toggle between hidden and not-hidden, which is not the best solution.
What I want is for the outer edges of the inner div to be opaque when outside the boundary of the outer div. (The pink & red elements are part of the same div. The red area represents the boundary of the outer div.)
https://i.sstatic.net/LXa1f.png
Below is an example that doesn't quite work.
If possible, I would like to achieve this using the current setup. However, I am open to other suggestions or using javascript/jQuery.
.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 class="frame">
<div class="outerdiv">
<div class="innerdiv">
</div>
</div>
</div>