CSS Background Image Slideshow Crossfading

Category: Slideshow | April 25, 2019
Author: Frontendscript
Official Page: Nil
Last Update:August 1, 2023

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


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

8 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?

    • 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.

  2. Hi,
    this is really great!
    Only I have one problem with it: I am trying to use it for some kind of rotating banner at the top of my page. When scrolling the page the content should slide over it. But strangely the first part (slightly bigger than the height of the banner) slides under it.
    Inspecting the page I find that the crossfade somehow has a transparent area below the actual picture(s) which overlays the top part of the page making navigation items inaccessible.
    I believe I have set all z-indexes correctly.
    Any ideas?

    • Hi Karl!
      The z-index only works on positioned elements (position: absolute, position: relative, position: fixed). Make sure you have defined position property for your navigation (or element that you want to place over this slider).

  3. Hi,
    I am trying to add 8 images, I don’t see much problems with 6 images, which currently I am using on my index page. However with 8 images, (set time to 48s), when it repeats, the first image appear very short, then overlap to second image quickly.
    Do you know why this occurs, or what I am doing wrong?
    Let me know thank you.

    • Hi Masumi!
      You need to update CSS keyframes as well. Divide the 100 with the number of images and then create CSS frames accordingly.

Comments are closed.