Overflow Hidden is hiding everything

Question

I'm trying to create a slider on my page using CSS. I have done the most part but when I'm using the overflow: hidden everything in the div disappears.

HTML

    @import url(http://fonts.googleapis.com/css?family=Istok+Web);
     @keyframes slidy {
     0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background: #101010;
      font-family: Istok Web, sans-serif;
       font-weight: 100;
    }
     div#captioned-gallery { 
       width: 100%; overflow: hidden; 
     }
    figure.slider { 
      position: relative; width: 500%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; height: auto;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
     position: absolute; bottom: 0;
     background: #43C1DF;
     color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
     font-family: lato;
     text-align: center;
     min-height: 50px;
    padding-top: 15px;
    }

 <div id="captioned-gallery">
            <figure class="slider">
                <figure>
                     <figcaption>Individual Learners! Courses from £18.00     </figcaption>
             </figure>
          <figure>
            
            <figcaption>Employers! Course from £14.00 to £10.00</figcaption>
         </figure>
        <figure>
           
            <figcaption>Plus unlimited redeem codes!</figcaption>
        </figure>
        <figure>
           
            <figcaption>The more you train!, The more cost effective!</figcaption>
        </figure>
        <figure>
            <figcaption>Plus personalised training academies</figcaption>
        </figure>

        <figure>
            <figcaption>Open access courses of your choice</figcaption>
        </figure>

        <figure>
            <figcaption>Courses accepted by Local Authorities</figcaption>
        </figure>
        <figure>
            <figcaption>Instant access and outstanding support! </figcaption>
        </figure>

    </figure>
</div>

i must be doing something wrong but can figure out what. Thanks for any help in advance.

Answer 1

you have to assign height to your elements

I just added

html,body,body>div,div>figure{
    height:100%;
}

   
    @import url(http://fonts.googleapis.com/css?family=Istok+Web);
     @keyframes slidy {
     0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background: #101010;
      font-family: Istok Web, sans-serif;
       font-weight: 100;
    }
    html,body,body>div,div>figure{
      height:100%;
    }
     div#captioned-gallery { 
       width: 100%; overflow: hidden; 
     }
    figure.slider { 
      position: relative; width: 500%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; height: 100%;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
     position: absolute; bottom: 0;
     background: #43C1DF;
     color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
     font-family: lato;
     text-align: center;
     min-height: 50px;
    padding-top: 15px;
    }

 <div id="captioned-gallery">
            <figure class="slider">
                <figure>
                     <figcaption>Individual Learners! Courses from £18.00     </figcaption>
             </figure>
          <figure>
            
            <figcaption>Employers! Course from £14.00 to £10.00</figcaption>
         </figure>
        <figure>
           
            <figcaption>Plus unlimited redeem codes!</figcaption>
        </figure>
        <figure>
           
            <figcaption>The more you train!, The more cost effective!</figcaption>
        </figure>
        <figure>
            <figcaption>Plus personalised training academies</figcaption>
        </figure>

        <figure>
            <figcaption>Open access courses of your choice</figcaption>
        </figure>

        <figure>
            <figcaption>Courses accepted by Local Authorities</figcaption>
        </figure>
        <figure>
            <figcaption>Instant access and outstanding support! </figcaption>
        </figure>

    </figure>
</div>

Answer 2

See this working fiddle

I've corrected your html structure, a figure element can't be around another figure element. Otherwise your structure is good.

In the CSS, I've changed only this :

body { 
  margin: 0; background: #101010;
  font-family: Istok Web, sans-serif;
   font-weight: 100;
   overflow-x: hidden;
}

I remove the figure property that was applying to ALL figure of your code and it's good.