Estou com um problema, adicionei um slider ao meu header mas acontece que ele ocupa mais do que os 100vh que eu dei, ocupa ainda um pouco da seccao abaixo do header. Acima dessa seccao que ele ocupa eu tinha um "before" que fazia aparecer um divisor de seccao, mas esse divisor tambem nao aparece...
Já agora, podem me dizer se estou a fazer esse "divisor" de seccao da forma correta?
E já agora, aproveitando, gostaria tambem de fazer um efeito de gradiente tipo filtro por cima das imagens do slider, tem como?
Gostaria também mudar a animação da transição, em vez de ser fade, gostaria de um swipe left.
Codigo html:
<!--------------- HEADER ------------------------>
<header>
<div class="container">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<div class="slide_img" id="one">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
</div>
<div class="slide_img" id="two">
<img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
</div>
<div class="slide_img" id="three">
<img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
</div>
<div id="nav_slide">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
</div>
</div>
</header>
<!--------- SECTION SEARCH ------------>
<section class="section-search">
<div class="row">
<h1>SEARCH YOUR VIBE</h1>
</div>
<div class="row steps-container">
<div class="col span-1-of-2 steps">
<div>1</div>
<p>SEARCH WITH ONE OF THE FOLLOWING OPTIONS</p>
</div>
<div class="col span-1-of-2 steps">
<div>2</div>
<p>THEN THE PAGE WILL SWIPE LEFT AND A BUNCH OF VIBES WILL APPEAR</p>
</div>
</div>
<div class="search-form">
<div class="row">
<input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
<div class="row">
<input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
<div class="row">
<input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
<div class="row">
<button class="search-btn" type="submeter" name="submeter">SEARCH</button>
</div>
</div>
</section>
CSS:
/* slider */
#i1, #i2, #i3{ display: none;}
.container .slide_img{
position: absolute;
width: 100%;;
height: 100vh;
}
.container .slide_img img{
width: 100%;
height: 100vh;
}
/* .prev, .next{
width: 12%;
height: inherit;
position: absolute;
top:0;
background-color: rgba(116, 200, 210, 0);
color:rgba(244, 244, 244,.9);
z-index: 99;
transition: .45s;
cursor: pointer;
text-align: center;
} */
/*.next{right:0;}
.prev{left:0;} */
label span{
position: absolute;
font-size: 100pt;
top: 50%;
transform: translateY(-50%);
}
/*.prev:hover, .next:hover{
transition: .3s;
background-color: rgba(88, 88, 89,.8);
color: #ffffff;
} */
.container #nav_slide{
width: 100%;
bottom: 12%;
height: 11px;
position: absolute;
text-align: center;
z-index: -5;
cursor: default;
}
#nav_slide .dots{
top: -5px;
width: 18px;
height: 18px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
transition: .4s;
}
#nav_slide .dots:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.9);
transition: .25s
}
.slide_img{z-index: -1;}
#i1:checked ~ #one ,
#i2:checked ~ #two ,
#i3:checked ~ #three,
#i4:checked ~ #four ,
#i5:checked ~ #five
{z-index: 9; animation: scroll 1s ease-in-out;}
#i1:checked ~ #nav_slide #dot1,
#i2:checked ~ #nav_slide #dot2,
#i3:checked ~ #nav_slide #dot3,
{ background-color: rgba(255,255,255,.9);}
@keyframes scroll{
0%{ opacity:.4;}
100%{opacity:1;}
}
/* ----------------------- SECTION SEARCH ---------------------------- */
.section-search::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
margin-top: -10%;
background: url(/img/divider_Prancheta%201.svg);
background-repeat: no-repeat;
overflow: hidden;
z-index: 100;
}
.section-search {
background-color: white;
opacity: 80%;
z-index: 2;
}
.steps-container {
color: #000;
width: 80%;
margin: 0 auto;
}
.steps:first-child {
margin-left: -2%;
margin-right: 2%;
}
.steps:last-child {
margin-right: -10%;
}
.steps>p {
text-align: left;
margin-top: 5px;
letter-spacing: 1px;
font-size: 90%;
}
.steps div {
color: white;
background-color: #000;
display: inline-block;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
margin-left: 5%;
vertical-align: middle;
}
/*search box*/
.search-form {
width: 80%;
margin: 0 auto;
}
.search-field {
width: 100%;
padding: 7px;
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 4%;
}
.search-btn {
width: 15%;
margin-top: 4%;
background-color: #ccc;
padding: 1%;
border: 0;
}
*:focus {
outline: none;
}
Desde já, muito obrigado!