隐藏了自定义形状图像的溢出

Question

这是2个图像层：

带电话的手和一个黑洞。

HTML标记：

<div class="wrapper">
  <img class="wrapper__image" src="path/to/image.png">
</div>

SCSS：

.wrapper {
  background: url("path/to/blackhole.png") no-repeat center bottom;
  width: 528px;
  height: 600px;
  overflow: hidden;

  &__image {
    margin-left: 60px;
    margin-top: 5px;
  }
}

如您所见，带有手机的手形图像的底部有点圆角，黑洞也被圆角了，所以如果我将手形推到wrapper div之外，手形的位置上就会有空格图片在底部。

有没有办法将手形图像推到黑洞下方并隐藏起来，而黑洞图像上没有透明角：

如果黑洞是方形的，那就没有问题了。

我的目的是将手机隐藏在黑洞中，就像将它滑入黑洞一样。

Answer 1

我将使用纯CSS创建孔，您将能够获得所需的效果。

将鼠标悬停以查看效果。您只需要调整颜色以使其看起来像您的图像即可。

.hole {
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-bottom-right-radius: 50% 50px;
  border-bottom-left-radius: 50% 50px;
}

.hole::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  background: radial-gradient(farthest-side at top right, grey, black);
}

img {
  position:absolute;
  top:0;
  left:100px;
  transition:2s all;
}
.hole:hover img {
  top:100%;
}

<div class="hole">
  <img src="https://picsum.photos/100/200?image=1069">
</div>