我尝试达到与本网站相同的效果 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;
}
}
你知道吗?
提前谢谢!
阿默里
答案 0 :(得分:1)
所以,这就是我要解决的问题:
codepen已更新,似乎可以正常工作。