css - 向图像添加两个蒙版

Question

我正在尝试显示带有两个 svg 蒙版的图像。我尝试了几种不同的方法，但似乎无法做到正确。这是一个粗略的图像来说明我想要什么：

图像是黑色方块，面具是红色。我尝试将它们添加为伪元素，但它会造成如此混乱。理想情况下，当用户将鼠标悬停在上方时，他们会一起移动以完成圆圈，但我希望图像保持一致（不是同一 img 的两个不同部分）。我怎样才能做到这一点？

Answer 1

CSS 掩码可以轻松做到这一点：

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

另一种过渡类型：

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

Answer 2

建议：在图像顶部放置两个 div....一个 div 将保留左半部分的掩码....另一个 div 将保留右半部分的掩码....每个 div 只有一半宽作为原始图像并内联显示....然后在悬停时，您可以为每一半分配一个类，在鼠标移出时将它们一起移动和分开