Is it possible using css to have an element that inverts everything behind it such that anything that passes below the element will be inverted?
In the example I would like to the circle to be white while passing through the black square, but black otherwise.
.container {
height: 500px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.invert {
height: 300px;
width: 300px;
background-color: black;
}
.move {
height: 50px;
width: 50px;
background-color: black;
border-radius: 1000px;
position: absolute;
top: 0;
left: 0;
animation: move linear 5s infinite;
}
@keyframes move {
0% {
transform: translate(0,0);
}
100% {
transform: translate(500px, 500px);
}
}
<div class="container">
<div class="invert">
</div>
<div class="move">
</div>
</div>
This needs to be structure agnostic, as in my actual implementation I am using a large number of randomly moving circles as a fixed background, I will not know when they will enter or exit a square, and the relation between circle and square will be different between pages
I've tried filter: invert(1), but it doesn't do what I need it to, I am also curious whether it could be done using svg filters.
Thanks a lot!