图像幻灯片，div在容器外面，隐藏溢出

Question

所以我有一个问题，我试图建立一个图像滑块..

以上是我大致想要实现的目标。

我有一个灰色的盒子，这是我的包装，在里面，我有一个带图像的小盒子，不应该在包装器外面显示，如图所示。

但是图像上会有一个小按钮，它应该扩展一个div，并显示信息。

我怎样才能实现这一目标？

展开的div，在滑动图像滑块时也应该遵循它所属的div ..

到目前为止我有一个简单的标记，但我无法产生预期的效果..

没有找你编写我的代码，但是编写有关可以帮助我实现目标的工作示例或描述会有所帮助。

.carousel-wrapper {
  border: 1px solid red;
  width: 100%;
  height: 180px;
  margin: 40px auto;

  .carousel-box-wrapper {
    overflow: hidden;
    width: 50%;
    margin:0 auto;
    height:200px;
    white-space:nowrap;
    transition: none;
    transform: translate3d(0px,0px,0px);

    .carousel-box {
      width:100px;
      /*width: calc(100% / 4);*/
      padding: 0 10px;
      display: inline-block;
      vertical-align: top;
      margin: 30px 25px;

      .carousel-subdiv{
        background-color:#a00;
        height:1000px;
        position:absolute;
        top:100px;
      }

      img.carousel-image {
        width:100%;
        height: 125px;
      }
    }
  }

  .carousel-box-wrapper:before {
    content: " ";
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
  }
}

<div class="carousel-wrapper">
  <div class="carousel-box-wrapper">
    <div class="carousel-box">
      <img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
      <div class="carousel-subdiv"></div>
    </div>
    <div class="carousel-box">
      <img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
    </div>
    <div class="carousel-box">
      <img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
    </div>
    <div class="carousel-box">
      <img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
    </div>
    <div class="carousel-box">
      <img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
    </div>
  </div>
</div>