title: image slide, with div outside of container with overflow hidden
body: <p>so i have an issue, with an image slider i am trying to build.. </p>
  
  <p><a href="https://i.stack.imgur.com/Gcivu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gcivu.jpg" alt="Example image of what i want to achieve."></a></p>
  
  <p>above is what i roughly want to achieve.</p>
  
  <p>i have the grey box, which is my wrapper, inside of that, i have a smaller boxes with images, that should not be shown outside of the wrapper as shown on the image. </p>
  
  <p>but the images will have a small button on it, which should expand a div, with info on. </p>
  
  <p>how can i achieve this ?</p>
  
  <p>the expanded div, should also follow the div it belongs to when sliding the image slider.. </p>
  
  <p>i have a simple markup so far, but i am unable to produce the desired effect.. </p>
  
  <p>not looking for you to write my code, but coded working examples or descriptions as to what could help me achieve my goal, would be helpfull. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel-wrapper"&gt;
    &lt;div class="carousel-box-wrapper"&gt;
      &lt;div class="carousel-box"&gt;
        &lt;img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=80%C3%97125&amp;w=80&amp;h=125" /&gt;
        &lt;div class="carousel-subdiv"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-box"&gt;
        &lt;img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=80%C3%97125&amp;w=80&amp;h=125" /&gt;
      &lt;/div&gt;
      &lt;div class="carousel-box"&gt;
        &lt;img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=80%C3%97125&amp;w=80&amp;h=125" /&gt;
      &lt;/div&gt;
      &lt;div class="carousel-box"&gt;
        &lt;img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=80%C3%97125&amp;w=80&amp;h=125" /&gt;
      &lt;/div&gt;
      &lt;div class="carousel-box"&gt;
        &lt;img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=80%C3%97125&amp;w=80&amp;h=125" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>