Fullscreen Image Slider With Pure CSS

Preview:

Description:

A pure HTML/CSS fullscreen slider component that uses radio inputs to switch between images. Heavily based on CSS3 transitions and transforms.

How to use it:

Build the html structure for the fullscreen slider.

<div class="container">
  <input type="radio" id="s1" name="slides" checked="checked"/>
  <section class="slide slide1">
    <h2>Heading One</h2>
  </section>
  <input type="radio" id="s2" name="slides"/>
  <section class="slide slide2">
    <h2>Heading Twol</h2>
  </section>
  <input type="radio" id="s3" name="slides"/>
  <section class="slide slide3">
    <h2>Heading Three</h2>
  </section>
</div>

The core CSS/CSS3 styles.

.container {
  color: white;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw
}
.container h2 {
  text-align: center;
  font-size: 4.6em;
  color: white;
  font-family: 'Anton', sans-serif
}
.container input[type="radio"] {
  position: absolute;
  z-index: 10;
  top: 90%
}
.container #s1 { left: 40% }
.container #s2 { left: 50% }
.container #s3 { left: 60% }
.container .slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
  transition: left 0s 1s
}
.container [id^="s"]:checked+.slide {
  transition: all 0.65s ease-out;
  left: 0;
  z-index: 3
}
.container [id^="s"]:checked+.slide h2 {
  transition: transform 0.82s 0.5s ease, opacity 0.8s 0.7s ease;
  opacity: 1;
  transform: translateY(0)
}

Add custom background images to the slides.

.container .slide1 {
  background-image: url("1.jpg");
  background-size: cover
}
.container .slide1 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide2 {
  background-image: url("2.jpg");
  background-size: cover
}
.container .slide2 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide3 {
  background-image: url("3.jpg");
  background-size: cover
}
.container .slide3 h2 {
  opacity: 0;
  transform: translateY(-100%)
}