Add two masks to an image-CodePudding

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?

CodePudding user response：

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">

CodePudding user response：

suggestion: put two divs on top of the image....one div will hold the mask for the left half....the other div will hold the mask for the right half....each div is only half as wide as the original image and are displayed inline....then on hover you could assign a class to each half that moves them together and apart on mouseout