Pure CSS Fading Slideshow with Scaling Image

Today, we are going to build a minimal pure CSS fading slideshow with a scaling image effect. The coding concept is really simple and straightforward in this image slideshow. You just need is to place your images as a CSS background image of a div element, and wrap these div elements into a parent div.

Yes! you heard right, you just need to create only two type of div elements, a few CSS styles, and your image slideshow will be ready. You can check the final output of this slideshow on the demo page before getting started with coding.

Basically, this fading image slideshow is a kind of auto image slider to play the images in a sequence. You can slide your images with custom delay and duration with the help of this slideshow. So, let’s get started with its creation process.

The HTML Structure

First of all, we need to create a container (a div element) for the slideshow. In that container, we’ll place images for slideshow as the background. After that, we’ll slide each image (actually div element that contains the image) using CSS animation.

So, create a div element with the class name “slide” and place other blank div elements with the style attribute. Define the background-image URL in the style attribute just like the below code:

<div class="slide">
  <div style="background-image:url(img/image-1.jpg)"></div>
  <div style="background-image:url(img/image-2.jpg)"></div>
  <div style="background-image:url(img/image-3.jpg)"></div>
  <div style="background-image:url(img/image-4.jpg)"></div>
  <div style="background-image:url(img/image-5.jpg)"></div>
</div>

Here the most interesting thing is that you can also add your image caption text (or any other HTML element) between the empty div tags. If you want to do so, you need to add some extra CSS styles in order to adjust the captions and other elements.

CSS Styles for Fading Slideshow

In CSS, define the size (height and width) of slideshow main container. Similarly, set a background color that will be displayed before loading the images and set the border. The most important thing to do here is that keep the overflow hidden and set its position to relative.

.slide {
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
  background-color: #000;
  border: 8px solid #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

After that, define the styles for child div elements of the slide. Keep its width and height a hundred percent and make it an absolute element. We need to hide it by default to fade/switch to the other images. So, define its opacity as 0 in order to hide it. Likewise, add slide animation according to the number and delay of images.

.slide > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  animation: slide 25s infinite;
  opacity: 0;
}

Define the animation delay of each div element using the CSS nth-child selector. You can set the custom value for the delay to increase/decrease the time before the next image fade in.

.slide > div:nth-child(2) {
  animation-delay: 5s;
}
.slide > div:nth-child(3) {
  animation-delay: 10s;
}
.slide > div:nth-child(4) {
  animation-delay: 15s;
}
.slide > div:nth-child(5) {
  animation-delay: 20s;
}

Finally, define the “slide” animation with the following mentioned keyframes. You can manage the scaling effect by changing the value of transform property.

@keyframes slide {
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  40% {
    transform: scale(1.2);
  }
}

That’s all! I hope you like this minimal pure CSS fading slideshow. If you have any questions or suggestions related to this slideshow, feel free to comment below.

You May Also Like

Leave a Comment