Witam mam pewien problem i nie wiem jak z nim sobie poradzić. ( nie wiem gdzie leży problem )
index.html
<!doctype html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/horizontal.css"/>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Home</label>
<label for="slide-2-trigger">Images</label>
<label for="slide-3-trigger">About this Site</label>
<label for="slide-4-trigger">Tutorial</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Pure CSS Slider</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Pictures</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>About Us</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Watch it!</h1>
</section>
</div>
</body>
</html>
horizontal.css
@import url(http://fonts.googleapis.com/css?family=Audiowide);
//mixins
@mixin bp($bp, $min-max: min-width) {
$em: $bp/16;
@media(#{$min-max}: #{$em}em) {
@content;
}
}
html {
box-sizing: border-box;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
}
*,
*:before,
*:after { box-sizing: inherit; }
h1 {
color: rgb(255, 255, 255);
font-family: "Audiowide", cursive;
font-size: 4em;
font-size: 7vw;
line-height: 2.3;
margin: 0.5em 0 3em;
text-shadow: 1px 1px 1px #333;
}
@include bp(1075) { h1 { font-size: 4em; } }
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: rgba(0, 0, 0, 0.38);
color: #ffffff;
text-align: center;
}
header {
background: #626262;
box-shadow: 0 .5em 1em #ffffff;
font-family: "Audiowide", cursive;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
label {
color: #ffffff;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .75em;
font-weight: bold;
padding: 0 1em;
}
}
header label:hover {
background: rgba(42, 42, 42, 0.76);
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 100;
padding: 8em 1em 0;
background-color: rgb(0, 0, 0);
background-position: 50% 50%;
background-size: cover;
transition: left 0s .75s;
&-one { background-image: url('../img/starryFarm.jpg'); }
&-two { background-image: url('../img/lakehouse.jpg'); }
&-three { background-image: url('../img/campusDarkDays.jpg'); }
&-four { background-image: url('../img/autumn.jpg'); }
h1 {
opacity: 0;
transform: translateY(100%);
transition: transform .7s .7s, opacity .7s;
}
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left .65s ease-out;
& h1 {
opacity: 1;
transform: translateY(0);
transition: all .7s .7s;
}
}
Efekt który chce osiągnąć.
http://codepen.io/davidicus/pen/pvObpV
Mam problem ponieważ tło się nie chce u mnie pojawiać, proszę o pomoc.
link, tak?