I am looking for help to make a background slider on click. But so far not found any help. This is the html section where class with section-1 is given the background:
<div className="section-1">
<div className="first-button">
<button>Enroll Now</button>
</div>
<i class="fa fa-angle-right scroll-button" onclick="plusSlide(-1)" aria-hidden="true"></i>
<i class="fa fa-angle-right scroll-button-left" onclick="plusSlide(1)" aria-hidden="true"></i>
</div>
And this is the CSS:
.section-1 {
background-image: url(./assets/bg1.jpg);
height: 75vh;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
I also try to give it some javascript. But that javascript is only applicable in the case of simple image. I have done simple images through loop and some css classes.
Even though this is a reactjs topic I'll give it a try using the hover action and only css.
.slider {
padding: 25vh 0;
width: 100%;
background-color: red;
position: relative;
top: 6.25vh;
text-align: center;
transition: 0.2s;
opacity: 0;
}
.slider:hover {
opacity: 1;
}What this does basicaly is we style our paragraph to be a slider with it's text in the middle, and the moment we hover over it with our mouse the slider will appear with the text. You can edit the transition and the effect all you want. The basic idea is this.