如何通过 CSS 实现鼠标移动时，指定区域显示下层图片？

<!-- HTML -->
<div id="container">
  <img src="image1.png" id="image1">
  <img src="image2.png" id="image2" class="hidden">
</div>

/* CSS */
#container {
  position: relative;
  width: 300px;
  height: 300px;
}

#image1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("mask.png");
  mask-image: url("mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#container:hover #image2 {
  display: block;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 椭圆遮罩图片 */
.mask {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}