Wipe image in when hovering on a different element, with only HTML/CSS - as seen on https://neef.co

wipe.css

img.bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vh;
  height: 100vh;
  z-index: -2;
  clip-path: circle(0% at center);
  transition: clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

a:hover img {
  z-index: -1;
  clip-path: circle(40vh at center);
}


@media (pointer: coarse) {
  img.bg {
    display: none;
  }
}

wipe.html

<a href="https://link1.com" target="_blank"> link number 1
  <img src="image_1">
</a>
    
<a href="https://link2.com" target="_blank"> link number 2
  <img src="image_2">
</a>