88 lines
1.5 KiB
CSS
88 lines
1.5 KiB
CSS
*{margin:0;padding:0;}
|
|
a {color:inherit;text-decoration:none;}
|
|
body,html{
|
|
overflow:hidden;
|
|
height:100%;
|
|
font-size:16px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
background:#000;
|
|
color:#fff;
|
|
}
|
|
#wrap{
|
|
position:absolute;
|
|
left:0; top:0;
|
|
width:150%;
|
|
height:100%;
|
|
display:flex;
|
|
align-items:stretch;
|
|
margin:0 25%;
|
|
}
|
|
.hb {
|
|
position:relative;
|
|
width:25%;
|
|
z-index:1;
|
|
display:flex;
|
|
align-items:center;
|
|
z-index:2;
|
|
trasnform:scale(.97);
|
|
}
|
|
.c{
|
|
position:relative;
|
|
display:block;
|
|
max-width:90%;
|
|
}
|
|
.c img {
|
|
position:relative;
|
|
display:block;
|
|
width:100%;
|
|
height:auto;
|
|
z-index:2;
|
|
}
|
|
.txt {
|
|
position:absolute;
|
|
top:100%; left:10%;
|
|
width:80%;
|
|
opacity:0;
|
|
padding:1em 0 0 1em;
|
|
border-left:1px solid;
|
|
z-index:1;
|
|
transform:scaleY(1) translateY(-50px);
|
|
transition:transform .2s, opacity .5s;
|
|
}
|
|
h1 {
|
|
font-size:1.2em;
|
|
font-weight:700;
|
|
text-transform:uppercase;
|
|
}
|
|
.hb:hover .txt {
|
|
opacity:1;
|
|
transform:scaleY(1) translateY(0);
|
|
}
|
|
.fullBg {
|
|
position:fixed;top:0;left:0;width:100%;height:100%;
|
|
opacity:0;
|
|
transition:transform .5s, opacity .5s;
|
|
transform:scale(1);
|
|
z-index:1;
|
|
}
|
|
.fullBg img {
|
|
width:100%;height:100%;
|
|
object-fit:cover;object-position:center;
|
|
opacity:.5;
|
|
}
|
|
.hb:hover + .fullBg {opacity:1;transform:scale(1.02);}
|
|
.credits {
|
|
position:fixed;
|
|
bottom:0;right:0;
|
|
padding:1.5em;
|
|
font-size:.8em;
|
|
text-align:right;
|
|
font-style:italic;
|
|
opacity:.8;
|
|
transition:opacity .2;
|
|
z-index:3;
|
|
}
|
|
.credits:hover {
|
|
text-decoration:underline;
|
|
opacity:1;
|
|
} |