Add two masks to an image

Question

I'm trying to display an image with two svg masks on it. I've tried a few different ways but can't seem to get it right. Here is a crude image to illustrate what I want:

The image is the black square, and the masks are in red. I've tried adding them as pseudo elements but it makes such a mess. Ideally when the user hovers over then they move together to complete the circle, but I want to image to stay consistent (not two different halves of the same img). How can I achieve this?

Answer 1

CSS mask can easily do this:

img {
  -webkit-mask:
    radial-gradient(circle farthest-side at right,#000 99%,#0000) 0 100%,
    radial-gradient(circle farthest-side at left ,#000 99%,#0000) 100% 0;
  -webkit-mask-size:46% 92%;
  -webkit-mask-repeat:no-repeat;
  transition:.5s;
  cursor:pointer;
}
img:hover {
  -webkit-mask-size:50.1% 100%;
}

<img src="https://picsum.photos/id/1069/300/300">

Another type of transition:

img {
  -webkit-mask:
    radial-gradient(circle farthest-side at right,#000 99%,#0000) 0 100%,
    radial-gradient(circle farthest-side at left ,#000 99%,#0000) 100% 0;
  -webkit-mask-size:46% 92%;
  -webkit-mask-repeat:no-repeat;
  transition:.5s;
  cursor:pointer;
}
img:hover {
  -webkit-mask-position:7.5% 50%,92.5% 50%;
}

<img src="https://picsum.photos/id/1069/300/300">