Элемент, который будет виден только там, где он перекрывается, указывая c другой элемент?

Question

Я пытаюсь добиться следующего: у меня есть изображение на заднем плане и движущийся элемент на переднем плане. Я хочу показывать элемент переднего плана только тогда, когда он перекрывает элемент фона. В приведенном ниже фрагменте глобус представляет элемент фона, а красный квадрат - элемент переднего плана. Вот демонстрация того, как я хочу, чтобы это выглядело:

Первыми, что пришло в голову, были свойства css clip-path и mask-image, но я не могу заставить его работать.

Заранее спасибо!

.world {
  position: absolute;
  top: 100px;
  left: 100px;
}

.world img{
  width: 300px;
  height: auto;
}

.testelement {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 75px;
  top: 200px;
}

<div class="world">
  <img src="https://png2.kisspng.com/sh/bfd975773964bd26a28b9eecfb96b970/L0KzQYm3U8I6N5hwj5H0aYP2gLBuTgdwep1pRdl1b3LoPbTzigAuaaN5RddqcoTrPbTokwRwd58yTdNrZETkdom4VvU3QWczUKgBMEK2R4a4VcIzO2Y5UaUBMEm2SHB3jvc=/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696.8660237515223549360938.png"/>
</div> 
<div class="testelement">
</div>

Answer 1

Вот идея с mask. Просто используйте то же изображение внутри маски контейнера, размер которого определяется изображением. Затем сделайте красный квадрат внутри этого контейнера:

.world {
  position: absolute;
  top: 100px;
  left: 100px;
  width:300px;
  -webkit-mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
               center/contain no-repeat;  
          mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
               center/contain no-repeat;
}

.world img{
  width: 100%;
  display:block;
}

.testelement {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: -20px;
  top: 150px;
  transition:1s all;
}

.world:hover .testelement{
 left:20px;
}

<div class="world">
  <img src="https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png">
<div class="testelement">
</div>
</div>