Css positioning

I try to achieve the same effect as the one on this website http://www.rumba.com.br/

I would describe it like this :

A list of element (or caption)
On hover on one of the element of the list, an image appears in the background

I try to reproduce this effect with CSS-only. It works pretty well, but now, I'm stuck to position the "list" (figcaption in my case) on the bottom of the page. I would like the last element of the "list", "Title three" on this exemple, to be on the bottom of the page.

Codepen :

http://codepen.io/AmauryH/pen/QKexJq

HTML :

    <header>
        <figure>
        <figcaption>Title One</figcaption>
        <img src="http://amauryhanser.com/vrac/01.png" />
    </figure>
    <figure>
        <figcaption>Title Two</figcaption>
        <img src="http://amauryhanser.com/vrac/02.png" />
    </figure>
    <figure><figcaption>Title Three</figcaption>
        <img src="http://amauryhanser.com/vrac/03.png" />
    </figure>
</header>
<section>
    Remaining content...
</section>

SCSS :

@import "compass/css3";
@import "compass/reset";

* {
  @include box-sizing(border-box);
}
html {
  height:100%;
}
body {
  background: #000;
  height:100%;
  color:white;
}

header {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  figure {
    width:400px;
    figcaption {
      margin: 10px 20px;
      z-index:2;
      cursor: pointer;
      font:40px arial, sans-serif;
      color:#fff;
      &:hover + img{
        @include opacity(1);
      }
    }
    img {
      z-index:-1;
      position:absolute;
      left:0;
      top:0;
      @include opacity(0);
      width:100%;
      @include transition(opacity 2s ease-in-out);
    }
  }
  & + section {
    background:#333;
    height: 500px;
  }
}

Do you have any idea ? Thanks in advance !

Amaury

Solution

So, here is what I did to solve it :

Added a div wrapping all
Added "display: table-cell; vertical-align: bottom;" to this div
Added "display:table" to header

The codepen is updated and it seems to work.