Solution 1 :

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>

Solution 2 :

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>

Problem :

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.

Comments

Comment posted by Amaresh S M

what is u r problem

Comment posted by Libra

Can you clarify what you mean by “appears”? appears is not a verb

Comment posted by dictionary.cambridge.org/dictionary/english/appear

dictionary.cambridge.org/dictionary/english/appear

Comment posted by Vadim Rahmanov

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

Comment posted by Libra

@VadimRahmanov Appeared, Appearing, Appears. Appear used in its virgin form as a verb is something nobody has done since the middle ages

By

Leave a Reply

Your email address will not be published. Required fields are marked *