If you're looking to achieve a particular effect with a filter, there's a workaround that can give you similar results. One option is to add a shadow to the parent element using the 'inset' property.
Simply include the line
box-shadow: inset 0 0 0 47px #ffffff8a;
in the style of your
.parent class.
Keep in mind that this method is more of a workaround and may not work perfectly if the image within the parent container changes size.
.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
position: relative;
box-shadow: inset 0 0 0 47px #ffffff8a;
}
.children {
background-color: transparent;
height: 200px;
width: 200px;
border: 3px blue solid;
}
<div class="parent">
<div class="children"></div>
</div>
An alternative approach is to apply the shadow directly to the child element and utilize overflow:hidden; on the parent. This ensures that the effect remains consistent even if the image dimensions change.
.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
position: relative;
overflow: hidden;
}
.children {
box-shadow: 0 0 0 100000px #ffffff8c;
background-color: transparent;
height: 200px;
width: 200px;
border: 3px blue solid;
}
<div class="parent">
<div class="children"></div>
</div>
To achieve the desired effect, it's recommended to use the box-shadow property on the child element as demonstrated in the second snippet. Remember to include overflow:hidden; on the parent element to ensure the shadow respects the boundaries of the container.