HTML CSS Image Slideshow with Smooth Transitions

byCodingFlicks -July 31, 2023

0

HTML CSS Image Slideshow with Smooth Transitions

Attractive visual content on any website helps to attract users' attention. One such engaging visual content is the image slideshow. HTML CSS Image Slideshow with Smooth Transitions is a popular way if you need to display multiple images together seamlessly. Usually, developers use JavaScript to create this image slideshow. But due to advancements in HTML and CSS, this type of image slideshow can be created without JavaScript. In this blog post, we will provide you with the HTML and CSS Code to make a simple and eye-catchy image slideshow. Below is a video demo that will give you an idea of how the image slideshow will look after coding.

VIDEO DEMO:

Hope you have seen the video demo. Image slideshow is a widely used element in web design. If you want to display items like product images, portfolio images, etc an image slideshow with transitions can capture the attention of your website visitors. Before we begin, please ensure that you have a basic understanding of HTML and CSS. Here we will arrange the slideshow with HTML and style and animate the images with CSS.

We used the CSS keyframes rule to produce a fading effect for the images. The images will fade in and out continuously, producing an eye-catching slideshow. To ensure that the slideshow does not exceed a specific width on larger displays, the max-width attribute is set to 800px. Each div with the class "slide" is positioned absolutely, allowing the images to overlap and fade in and out smoothly. We used the animation-delay parameter in this project. It will add a delay to each image's animation so that it appears at different intervals during the slideshow.

You May Also Like:

HTML CSS Image Slideshow with Smooth Transitions [Source Code]:

First, create HTML CSS files. After that, copy the code from the code box below and paste them into your files. In case of any problem, you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CSS Image Slideshow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="slide fade">
            <img src="img/1.jpg" alt="Image 1">
        </div>
        <div class="slide fade">
            <img src="img/2.jpg" alt="Image 2">
        </div>
        <div class="slide fade">
            <img src="img/3.jpg" alt="Image 3">
        </div>
    </div>

</body>
</html>

ADD CSS:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: antiquewhite;
}

.slideshow-container {
    position: relative;
    max-width: 800px;
    margin: 5% auto;
}

.slide {
    position: absolute;
    opacity: 0;
    animation: fade 12s infinite;
    border: 10px solid #fff;
    box-shadow: 0 6px 25px rgba(0,0,0,0.5);
}

img {
    width: 100%;
    height: auto;
}

@keyframes fade {
    0%, 100% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
}

/* Add animation delay for each slide */
.slide:nth-child(2) {
    animation-delay: 4s;
}

.slide:nth-child(3) {
    animation-delay: 8s;
}


@keyframes fade {
    0%, 100% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
}

Now you have learned how to make a simple and visually pleasing HTML CSS image slideshow with transitions in it. Go ahead and use this image slideshow on your website and showcase your images to your audience. Happy Coding!

DOWNLOAD CODE

Please do not enter any spam link in the comment box.