CSS Background Image Slideshow Crossfading

Category: Slideshow | April 25, 2019
CSS Background Image Slideshow Fade
Author: Frontendscript
Official Page: Nil
Last Update:April 25, 2019
License:MIT

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
  }
}

You May Also Like

2 thoughts on “CSS Background Image Slideshow Crossfading”

  1. This is great. However, it tend to slower my browser. Is there a way can make the images load all first then only start the crossfade effect? Maybe show some sort of loading bar on top of the browser?

    Reply
    • Thanks for your feedback!
      All images load through CSS background property, so there is only one way to load them faster. Keep your images in compressed size and place CSS file inside the <head> tag.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.