Измените текст и цвет GIF, когда они накладывают другие GIF ⇐ Html

[Anonymous]

Элемент A — это элемент div с черным текстом (элемент Span) и черным текстом GIF (элемент img) с фиксированной позицией. Элемент B — это цветной GIF (элемент img), у которого нет фиксированной позиции, и при прокрутке он может оказаться под элементом A.
Я хочу изменить элемент A и сделать его белым, когда элемент B находится под ним.

Код: Выделить всё

.overlay {
display: flex;
flex-direction: column;
position: fixed;
}
.text {
font-size: 60px;
color: black;
}
.overlaygif {
width: 250px;
}
.underneathimage {
margin-left: 75px;
margin-top: 300px;
margin-bottom: 500px;
}< /code>

Hello
[img]https://media.tenor.com/iIJVkgtVYgMAAAAi/tom-darondovas-signature.gif[/img]

[img]https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDRndjFxNWp5NzR4NGJzYmgxM2h5Nm4wbjRldDI2NGs3NGIwa3dwdyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dvOqEdPBJ6LQMoYa6Z/giphy.gif[/img]

в этом видео вы можете увидеть разницу между тем, что делает код, и чего я хотел бы достичь.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -other-gif