我想做以下悬停滑块：

当鼠标悬停在红色部分上时，蓝色部分应该从左向右滑动。它应该从红色部分的右侧滑动，并且不显示（IidoEe.应该滑到红色部分后面）。蓝色部分最初应该隐藏在红色部分后面，根本不应该显示。蓝色部分会比红色部分大，所以必须用溢出或其他东西隐藏。不应有不透明度过渡，但其他过渡是可接受的
这是我目前所掌握的情况：
超文本：

<div class="container">
  <div class="static-content">
  </div>
  <div class="overlay">
    OverLay Content - this will be some text
  </div>
</div>

CSS：

.container {
  position: relative;
  width: 200px;
  height: 100px;

  .static-content {
    display: block;
    background-color: red;
    width: 100%;
    height: 100%;
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #008CBA;
    height:100%;
    width: max-content;
    transition: .5s ease;
  }
}

.container:hover .overlay {
  transform: translateX(100%);
  height: 100%;
}

问题是蓝色部件在红色部件前面。