如何使用溢出-y 隐藏和溢出-x 可见的重叠图像？

Question

我有几个 div 里面有重叠的图像，为了美观，我试图使用向上滑动的效果来隐藏它们。
为了使其正常工作，我需要一个溢出-y：隐藏；溢出-x：在div中可见。
但是当我添加溢出-y 属性时，它不允许我将溢出-x 设置为可见，只允许隐藏和滚动。

在我看来应该可以做这样的事情，但它不起作用。

这是显示问题的片段，第一行只是图像，第二行是具有溢出属性的图像：

div {
  display: inline-block;
  width: 30px;
}
div#overflow {
  overflow-y: hidden;
  overflow-x: visible;
  height: 300px;
}
img {
  height: 400px;
  width: 50px;
}

<div id="no-overflow">
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>
<div>
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>
<div>
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>
<br><br>
<div id="overflow">
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>
<div id="overflow">
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>
<div id="overflow">
  <img src="https://i.ibb.co/KhhPwFV/a.png" alt="a" border="0">
</div>