Css позиционирование

Question

Я пытаюсь добиться того же эффекта, что и один на этом сайте http://www.rumba.com.br/

Я бы назвал это так:

• список элементов (или подписи)
• О парении на одном из элементов списка изображение появляется в фоновом режиме

Я пытаюсь воспроизвести этот эффект только с помощью CSS. Он работает очень хорошо, но теперь я застрял в позиции «списка» (figcaption в моем случае) в нижней части страницы. Я бы хотел, чтобы последний элемент «списка», «Название три» на этом примере, находился в нижней части страницы.

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; 
    } 
} 

Есть ли у вас какие-либо идеи? Спасибо заранее!

Амори

Answer 1

Итак, вот что я сделал, чтобы решить:

• Добавлен ДИВ оберточной все
• Добавлен "дисплей: стол-клетка, вертикальные выравнивания: снизу;" к этому Div
• Добавлена ​​«дисплей: стол» с цоколем

codepen обновляется, и это похоже на работу.