0
I have a problem, I added a slider to my header but it happens that it occupies more than the 100vh I gave, still occupies a little section below the header. Above that section he occupies I had a "before" which made appear a section divider, but that divider also does not appear...
By the way, can you tell me if I’m doing this section "splitter" the right way?
And by the way, while I’m at it, I’d also like to make a filter-like gradient effect over the slider images?
I would also like to change the animation of the transition, instead of being faded, I would like a Swipe left.
Html code:
<!--------------- 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;
}
From now on, thank you very much!