Kangouroops Kangouroops - 1 month ago 20
Sass (Sass) Question

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

Answer

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.

Comments