CSS Background Image Slideshow Crossfading

In this tutorial, We will CSS background image slideshow with CSS3 crossfade transition effect. We will build it with only HTML and CSS. No need for Javascript at all!

It is basically a CSS-only fullscreen slider which has all images handle through a background CSS property. It provides fade-in/out transition instead of sliding the image.

Also, It is an automatic slider and changes the image after specify the time. With the help of media queries, It serves smaller images to mobile.

A little drawback about this slideshow doesn’t have arrow or bullet navigation.

How to Create CSS3 crossfade Slideshow

The slider comes up with few lines of HTML code. All you need to build a structure by defining a div element with a class name crossfade

No need to add an image using <img > tag. Just simply add HTML5 element figure without having anything.

<div class="crossfade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
</div>

The CSS

Let’s style the styling the figure element. We will add animation (will define using @keyframes). We will use background-size: cover; to make it responsive.

To align center the images of the viewport, We will use the background-position: center center;

With the help of position property, We will cover the all of page viewport with photo.

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

Now we will define the background photos for all the figure element. So that each following slider image will appear after a delay of time. We did addition of plus 6 sec for each image.

.crossfade > figure:nth-child(1) {
  background-image: url('../img/001.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('../img/002.jpg');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('../img/003.jpg');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../img/004.jpg');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('../img/005.jpg');
}

Finally, We will create @keyframes animation

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}