Here’s the simplest way I’ve found to achieve what you are looking for but with a slightly different structure. Here the h1 is close to the input so it’s easier to edit each item.
I also added an opacity transition to illustrate how to achieve some animation effects with CSS.
.slider {
text-align: center;
}
.slider h1 {
display: inline;
position: absolute;
top: 1em;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.6s;
}
.slider input {
display: inline;
position: relative;
top: 10em;
}
.slider input:checked + h1 {
opacity: 1;
}
<div class="slider">
<input type="radio" name="slide" checked>
<h1>Your Beauty Starts Here</h1>
<input type="radio" name="slide">
<h1>We Serve You for All Your Beauty Needs</h1>
<input type="radio" name="slide">
<h1>It’s Time to Relax & Take Care of Yourself</h1>
</div>
Your structure should be input and h1 tag like below
~ is called as general sibling selector
div.slider-container {
position: relative;
border: 1px solid red;
text-align: center;
padding-top: 150px;
padding-bottom: 10px;
}
div.slider-container h1 {
position: absolute;
top: 0;
opacity: 0;
transition: .5s linear;
left: 0;
right: 0;
padding: 20px;
}
input#slide1show:checked ~ h1.slide1 {
opacity: 1;
}
input#slide2show:checked ~ h1.slide2 {
opacity: 1;
}
input#slide3show:checked ~ h1.slide3 {
opacity: 1;
}
<div class="slider">
<div class="slider-container">
<input id="slide1show" checked type="radio" name="slide">
<input id="slide2show" type="radio" name="slide">
<input id="slide3show" type="radio" name="slide">
<h1 class="slide1">It’s Time to Relax & Take Care of Yourself</h1>
<h1 class="slide2">We Serve You for All Your Beauty Needs</h1>
<h1 class="slide3">Your Beauty Starts Here</h1>
</div>
</div>
div.slider-container {
position: relative;
}
div.radioslide {
display: inline;
position: absolute;
right: 20em;
top: 20em;
}
h1.slide1 {
position: absolute;
right: 2em;
top: 7em;
display: none;
}
h1.slide2 {
position: absolute;
right: 2em;
top: 7em;
display: none;
}
h1.slide3 {
position: absolute;
right: 2em;
top: 7em;
display: none;
}
input#slide1show:checked h1.slide1 {
display: inline;
}
<div class="slider">
<div class="slider-container">
<h1 class="slide1">It’s Time to Relax & Take Care of Yourself</h1>
<h1 class="slide2">We Serve You for All Your Beauty Needs</h1>
<h1 class="slide3">Your Beauty Starts Here</h1>
<div class="radioslide">
<input id="slide1show" type="radio" name="slide">
<input id="slide2show" type="radio" name="slide">
<input id="slide3show" type="radio" name="slide">
</div>
</div>
I would like to make that when I press radio button id="slide1show" it shows h1 class=slide1, when I press radio button id="slide2show" it shows h1 class="slide2" and etc, but input#slide1show:checked h1.slide1 { display: inline; } doesn’t work. Hopefully anyone know what’s the problem.
When I press radio button id=”slide1show” nothing changes and h1 class=slide1 still has display:none instead display:inline as in input#slide1show:checked h1.slide1
@VadimRahmanov Appeared, Appearing, Appears. Appear used in its virgin form as a verb is something nobody has done since the middle ages
