A simple crossfading slideshow made with CSS

“Simplicity is the ultimate sophistication.” ― Leonardo da Vinci

One of the great things about the current web design landscape, compared to a few years ago, is that now it’s possible to create things with just HTML & CSS that you would have in the past needed to use JavaScript or even Flash to accomplish. One example of this is a simple image slideshow, a set of images that automatically rotates every X seconds, often with a caption for each image, like the one below (mouse over for caption).

class-header-css3
CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
class-header-semantics
Semantics: Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
class-header-offline
Offline & Storage: Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
class-header-device
Device Access: Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
class-header-connectivity
Connectivity: More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
class-header-multimedia
Multimedia: Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
class-header-3d
3D, Graphics & Effects: Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.
class-header-performance
Performance & Integration: Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

Images and captions are from the W3C

Wait, how is the transition happening automatically, without JavaScript?

Thanks for asking. It’s accomplished through the magic of CSS keyframe animation (Also see: An Introduction To CSS3 Keyframe Animations by Louis Lazaris for an introduction). If you’re already pretty familiar with CSS animations, then go read this article by Lea Verou and see if you don’t learn something new :-)

First, let’s take a quick look at the markup (abbreviated for brevity):

[html]

CSS3: CSS3 delivers a…
Semantics: Giving meaning to…

…more figures…

[/html]
Pretty basic stuff, just a div to contain the whole thing, then each image+caption set is contained in a figure. Now for the basic styling:

[css]
.css-slideshow{
position: relative;
max-width: 495px;
height: 370px;
margin: 5em auto .5em auto;
}
.css-slideshow figure{
margin: 0;
position: absolute;
}
.css-slideshow figcaption{
position: absolute;
top: 0;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
transition: opacity .5s;
opacity: 1;
}
.css-slideshow figure{
opacity:0;
}
[/css]
The key thing about the above CSS is that all the figures are stacked up one atop another. This is accomplished by positioning the container div relative then positioning the figures absolute.

Staggering the animation start

Now here’s the crux of this slideshow cycling technique. All of the figures use the same animation, but with staggered start times. Here’s a simple example, with only four images and no cross-transition between them.
stagger2
The first image (represented by red above) is visible from 1-25, the second image (green) is visible from 26-50, the third image (blue) is visible from 51-75, and the fourth (orange) is visible from 76-100, then the whole cycle starts over again with the first image. So even though all four images have the same animation, which runs the same length of time for each image, because the start times are staggered only one image is visible at a time.

In the case of our slideshow, there are 8 images total, and we’ll display them each for 6 seconds, so the animation runs for a total of 48 seconds, and we’ll stagger the start times by 6 seconds. The animation for the first image starts at 0 seconds, the next one starts at 6 seconds, the next one after that starts at 12 seconds, then 18, then 24, and so on.

[css]
figure:nth-child(1) {
animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
}
[/css]

Timing the animation

Just one piece left, the animation itself, which runs for 48 seconds. When the animation begins at 0%, each image will already be visible, and will stay visible until it fades out from 10.5% to 12.5% and be invisible for the rest of the time until 98%, while the rest of the images each take their turn at going from 0% to 12.5% (remember the staggered start graphic above). Then at 98% it starts fading back in to be ready for when the animation starts over at 0%. Why 12.5%? Because 100% divided by 8 (the total number of slides) is 12.5%.

[css]
@keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity:1;
}
12.5%{
opacity: 0;
}
98% {
opacity:0;
}
100% {
opacity:1;
}
}
[/css]

CodePen Style

Check out this Pen!

Further reading/related

NOTE: The example CSS code above does not contain all of the necessary vendor prefixes it needs in order to work cross-browser. Here is the full prefixed CSS from the working example above: https://gist.github.com/leemark/11237860

151 Replies to “A simple crossfading slideshow made with CSS”

  1. Hi Mark
    Your clear explanations helped me to create a web-based slideshow without much efffort. But the slideshow only seems to work in Firefox and NOT in Chrome & IE. Can you suggest how to make the slideshow which will be compatible for all browsers?
    Thanks in advance.
    Kalyan

    1. Hi Kalyan,
      The CodePen demo works for me in Chrome, does it work for you? Something I should have been more clear about here is that the code I posted does not include all CSS vendor prefixes to make it work in as many browsers as possible. If you look at the browser support for CSS transitions and CSS animations it shows that the -webkit- vendor prefix is needed to support Chrome (especially for the animation). Running your code through a tool like prefixr is one way to add the needed vendor prefixes.

      The other thing you will see on caniuse.com is that neither CSS transitions nor animations are supported by IE versions prior to 10. Which means that this CSS-only technique, while being a neat proof-of-concept is not a viable real-world solution (yet) if you need to support earlier versions of IE. You would need to use javascript. For a simple slideshow like this which just automatically fades from slide to slide, it could be accomplished with just a few lines of jQuery, and would be very cross-browser compatible.
      – Mark

      1. Hi Mark
        I am thrilled to get a response from a pro like you. I am just a novice.
        Anyway I did manage to find the answer eventually and I am doing the slideshow with jquery!!
        Thanks so much for your assistance and thanks again for putting up such a fantastic website with explanations!
        With Warm Regards
        Kalyan

  2. Hello Mark! I wonder if I’m going to have a slide with 12 pictures, and I want all of them to be visible for one minute each(60 seconds/picture, total 12 minutes) do I divide 100 by 12? Then what? Do I still have 14.67% or should I divide even more?

  3. I chose 6 images instead. But it didn’t work. I can see that they are there and I made them visible but then they are all visible at the same time. This is how my code looks like css:
    .css-slideshow {
    position: relative;
    max-width: 328px;
    height: 78px;
    margin-top: -213px;
    margin-bottom: 130px;
    margin-left: 765px;
    padding: 0px 0px 0px 0px;
    text-align: right;
    border-top: 0px none;
    }
    .css-slideshow figure {
    margin: 0;
    position: absolute;
    }

    .css-slideshow figure {
    opacity:0;
    }

    figure:nth-child(1) {
    animation: xfade 192s 160s infinite;
    }
    figure:nth-child(2) {
    animation: xfade 192s 128s infinite;
    }
    figure:nth-child(3) {
    animation: xfade 192s 96s infinite;
    }
    figure:nth-child(4) {
    animation: xfade 192s 64s infinite;
    }
    figure:nth-child(5) {
    animation: xfade 192s 32s infinite;
    }
    figure:nth-child(6) {
    animation: xfade 192s 0s infinite;
    }

    @keyframes xfade {
    0% {
    opacity: 1;
    }
    14.67% {
    opacity:1;
    }
    16.67%{
    opacity: 0;
    }
    98% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
    }
    And html:

    I changed my image-codes to myimage.png so it would be shorter. There is no wrong with the image-codes because when I turn opacity to 100 I can see them all clearly that they are at the place they should. It’s just that there are no animation, all of them are there at the same time. So I turn the opacity on 0 again. Why isn’t it a slideshow? It happens nothing. What did I do wrong?

    1. It sounds like the animation is not running at all, right? Here’s the browser support chart for CSS3 animations, so this technique won’t work in IE prior to v10. Also in webkit-based browsers you will need to use the -webkit prefix for those CSS properties. That means that everyplace you have the animation property you also need a -webkit-animation version, for example: -webkit-animation: xfade 192s 32s infinite;, and also a prefixed version of the @keyframe animation code: @-webkit-keyframes xfade { ... }.

      Apologies for not making this clear enough in the post. I prefer to only give the unprefixed standard CSS code in examples for the sake of readability and simplicity, but the drawback is that the example code won’t work as-is in many browser versions until you add all the necessary browser-specific vendor prefixes.

      A quick way to get all the vendor prefixes you need (not necessarily the best way, but the quickest way) is to run your CSS code through prefixr.com. Chris Coyier at CSS-Tricks has a great post on other ways to handle CSS vendor prefixes.

      If that doesn’t resolve it, it’s hard to say for sure without seeing the full code, maybe you could put it on jsfiddle and I will take a look.

      1. My customer has a bunch of banners that they are just stacking up at the top of their website… looks like crap or I wouldn’t be trying to fix it. (www.roselandpublications.com)

        They have around two or three banners at any given time that they want posted on their front page. I am trying to utilize this code to make it just one “banner” that cycles through the different ones.

        I’ve successfully incorporated the code into dreamweaver and resized the images and the class “css-slideshow” to width=125, height=650, however the “box” stays the same size. Is there something I’m missing to change the entire slideshow to just 125×650?

        Thank you, and while it took some tweaking, I got it working as demonstrated :) (except for the size issue)

  4. Something that I’ve ran into, I’m trying to make each individual picture a link to a different website. The issue that I’m running across is that the first image to come up tends to stay on top regardless of its transparency value. Is there anyway to make their Z-value change with their transparency value so that each image is clickable during its allotted time frame?

    1. I tried adding a z-index to the xfade function in css, but it made no difference. Whatever the first link is, that field stays on top regardless of which image is currently visible. I even tried making the figure caption a link to click, but again, the first image/caption maintains top position. Any suggestions?

      1. Hi Kenneth,
        Here’s a codepen I made with hyperlinks, and it seems to be working: http://codepen.io/leemark/pen/dbkjy
        If you look at the CSS I have commented on the new lines I added, I added the z-index to the keyframe animation just like you said, but also set a default state for the z-index on .css-slideshow figure{. Let me know if that works for you, if not we’ll keep trying.

        1. hmm, i saw it worked in codepen, but when I applied it into my code it didn’t change the functionality. Let me make sure there isn’t any inherited issues going on. I also tried applying a 0 z-index to the image, but alas, no change.

          1. So there are 2 different z-index values, a higher value for the current active/visible slide and a lower value for the other slides that are not currently visible. I was using 0 and 2 in the codepen, you are using 900 and 1000, which should be totally fine. But what you want to make sure of is that whenever a particular slide is supposed to be visible it has the higher z-index value and whenever it’s not supposed to be the active/visible slide it has the lower value. In other words you want to use the higher z-index (1000 in your case) whenever the opacity is 1, and use the lower z-index (900) whenever the opacity is 0.

            Here’s what your animation code looks like now:

            0% {
            filter: alpha(opacity=100);
            opacity: 1;
            z-index: 900;
            }
            14.67% {
            filter: alpha(opacity=100);
            opacity: 1;
            z-index: 900;
            }
            16.67% {
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 900;
            }
            98% {
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 900;
            }
            100% {
            filter: alpha(opacity=100);
            opacity: 1;
            z-index: 1000;
            }

            So you want a z-index of 1000 at 0%, 14.67%, and 100%, and a z-index of 900 at all the other spots (keyframes). I saved a local copy of your code and tested this and this fix seemed to work for me. Good luck!

  5. Hi Mark,

    Just thought I’d pop in a quick comment. I’m in the beginning stages of getting into CSS. Used to hand code huge amounts of javascript way back when and then got into flash but need to move with the times!

    My need was to place some text images over a background image and have them fade from one to another. So I’ve used 5 transparent .png images and made them all start invisible. The thinking is pretty much the same. Here’s my code in case anyone might find it useful.

    Untitled 1

    .css-slideshow{
    position: relative;
    max-width: 352px;
    height: 320px;
    margin: 5em auto .5em auto;
    }
    .css-slideshow figure{
    margin: 0;
    max-width: 352px;
    height: 320px;
    background: transparent;
    position: absolute;
    }
    .css-slideshow figure{
    opacity:0;
    }
    figure:nth-child(1) {
    animation: xfade 75s 60s infinite;
    }
    figure:nth-child(2) {
    animation: xfade 75s 45s infinite;
    }
    figure:nth-child(3) {
    animation: xfade 75s 30s infinite;
    }
    figure:nth-child(4) {
    animation: xfade 75s 15s infinite;
    }
    figure:nth-child(5) {
    animation: xfade 75s 0s infinite;
    }

    @keyframes xfade{
    0% {
    opacity:0;
    }
    1% {
    opacity:1;
    }
    19%{
    opacity: 1;
    }
    20% {
    opacity:0;
    }
    }

    Thanks for a really useful site.

  6. You can add html code to comments only if you convert your angle brackets to thier respective HTML entities, like this: <code>

  7. Hi!
    Sorry for boring you with a question about an old but still useful post. Here is my question: I’m trying to understand how keyframes works: you set opacity transition at 16,67% telling is 100%/(total number of slides = 6), but number of slides are 8! I can’t understand why the opacity transition isn’t at 100% / 8 = 12,5% (slideshow doesn’t works properly with this value).
    If you could explain me this issue it would be great.
    Thanks, Piero

  8. Doesn’t seem to be working for me at all :S.. there is a big white space where the slideshow is supposed to be.. any help? plzzz I’ve done some playing around with it, but no luck :(

    1. Are you using all the necessary vendor prefixes in your CSS? Maybe if you post a link I can take a look at your code.

        1. Hi Marcus,
          When I look at your page, I see the slideshow working but there’s a delay of several seconds before it appears. Then after it cycles through all 6 images there’s a long delay before it starts again. Here’s an issue that I see with your code, as follows:


          figure:nth-child(1) {
          animation: xfade 48s 42s infinite;
          }
          figure:nth-child(2) {
          animation: xfade 48s 36s infinite;
          }
          figure:nth-child(3) {
          animation: xfade 48s 30s infinite;
          }
          figure:nth-child(4) {
          animation: xfade 48s 24s infinite;
          }
          figure:nth-child(5) {
          animation: xfade 48s 18s infinite;
          }
          figure:nth-child(6) {
          animation: xfade 48s 12s infinite;
          }

          So, for each of those figures above, there’s a line that looks similar to this animation: xfade 48s 12s infinite;. The first number, 48s, is the total length of the animation, and the second number, 12s in this case, is that animation-delay, or how long the browser should wait before starting the animation. You actually want that set so that your last slide has an animation-delay of 0, so that the slideshow starts running immediately instead of after a 12 second delay. This is also causing the gap between each time the slideshow cycles through. Then since you have only 6 slides and they are 6 seconds each, you would want to change the total animation time from 48s to 36s. So instead of what I pasted above, you would want something more like this:

          figure:nth-child(1) {
          animation: xfade 36s 30s infinite;
          }
          figure:nth-child(2) {
          animation: xfade 36s 24s infinite;
          }
          figure:nth-child(3) {
          animation: xfade 36s 18s infinite;
          }
          figure:nth-child(4) {
          animation: xfade 36s 12s infinite;
          }
          figure:nth-child(5) {
          animation: xfade 36s 6s infinite;
          }
          figure:nth-child(6) {
          animation: xfade 36s 0s infinite;
          }

          I think that should work for you, maybe there might need to be some adjustments to the @keyframe animation itself but I’m not positive.

          1. Hey Mark,

            Thanks for the fast response! I’ve made those changes and the slideshow is now working perfectly (and looks great!) –– in Firefox. I forgot to mention I was testing in Safari and Chrome. Is this the best approach for multi-browser support?

  9. Hi mark,

    I tried to use the slideshow for my own website but it won’t work for chrome and IE.
    When I use it i just get a white screen
    I already tried to use a prefixr but without result.

    The strange thing is that I can see the slideshow on your website in chrome.
    I can also see it with chrome in your codepens but not with jsfiddle.

    Any suggestions?

    Thanks!

    1. Hi Niels,
      What version of IE are you using? Can you share your jsfiddle link and I will take a look with chrome and IE both.

  10. Hi Mark

    If I can bother you with some noobish questions, I would appreciate it.

    Im trying to get your code to work inside the dreamweaver environment. Below is the code ive entered into the DW code page. Unfortunatly, I dont get the glorious slideshow. I get: http://chromafunk.com/viridis.html

    Am I doing this correctly?

    Heres the code:-

    CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.

    Semantics: Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.

    Offline & Storage: Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.

    Device Access: Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

    Connectivity: More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.

    Multimedia: Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

    3D, Graphics & Effects: Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.

    Performance & Integration: Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

    Images and captions are from the W3C

  11. oops. Seems my code copy/paste failed miserably. Looks like your comment box works with HTML! Any idea how I can get the code to you to look at?

    1. Hi Mike,
      It looks like your code doesn’t have all the necessary vendor prefixes to make it work cross-browser. I didn’t include the vendor-prefixes in my example code because it makes the CSS longer and makes it look more complicated and harder to parse.

      For more info check out this comment above: http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/#comment-263

      and this one: http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/#comment-402

      Here’s a tool that you can use to add all the necessary prefixes to the CSS: http://prefixmycss.com/

  12. hi Mark, I want to make a slider with 4 images, so I thought: I have to put to length of the animation at 24s and the delay at 6s so:

    -webkit-animation: fade 24s 6s infinite;
    and after that counting up of course, so 12s delay, ect.

    But the timing isn’t right, how is that that possible? I am not thinking the right way? Or should I change the animation itself?

    1. Hi Johan,
      Yes, you actually want to change the delay and length like you did, but also the animation itself. So you have 4 images, and you want them each to show for 6 seconds, and the animation is 24 seconds long. Try thinking of it this way, this is what helps me wrap my head around it: each image is going to have its own copy of the animation, which it runs on its own time schedule.

      For the first image that shows up, you want it to show up for 6 seconds, and its total animation is 24 seconds. You want it to be visible for the first 6 out of 24 seconds, or 6/24, or 25%, then you want it to be hidden the rest of the time so all the other images can take their turn being shown (until the very end where you start to show it again so it’s ready for its next turn). So just considering the first image’s animation, it is visible for the first 25% of its animation, then from 25-50%, its time for the 2nd image to be shown (so the first is hidden here), from 50% to 75% the 3rd image is shown (so the first is still hidden), from 75% to 100% it’s the 4th image’s turn, so the first is still hidden until right before the end, where it starts to appear again right before the animation loops and starts over.

      Check out this codepen, particularly the animation timing at the end of the CSS: http://codepen.io/leemark/pen/mDvai?editors=110

  13. Hi, i just wanted to see if ur code works, so i kind of copied it and pasted it on my notepad. when i tried loading it on the browser, there was no effect, no animation, the images were just static. i wanna know what’s wrong. thx

  14. Hi Mark
    This is a great post and I appreciate the detailed explanations. I know that you have commented several times on including the vendor prefixes however I am running into an issue with IE11. I thought I saw that
    The odd thing is I can see your animations on IE11 but not mine. I have copied exactly what you have on the github link then made some minor adjustments but still it does not appear to work for me in ie11. Firefox, Safari, and Chrome work fine.
    Would you mind taking a peek at my css code below to see if I have mistyped something? Thanks.

    /*Slide Show coding*/
    .css-slideshow {
    position: relative;
    max-width: 1000px;
    height: 250px;
    margin: 1px auto 15px auto;
    font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
    font-weight: 300;
    }
    .css-slideshow figure {
    margin: 0;
    max-width: 1000px;
    height: 250px;
    background: #fff;
    position: absolute;
    }
    .css-slideshow img {
    -webkit-box-shadow: 0 0 2px #666;
    box-shadow: 0 0 2px #666;
    }
    .css-slideshow figcaption {
    position: absolute;
    top: 190px;
    color: #fff;
    background: rgba(0,0,0, .3);
    font-size: .8em;
    padding: 8px 12px;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
    }
    .css-slideshow:hover figure figcaption {
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    .css-slideshow-attr {
    max-width: 1035px;
    text-align: right;
    font-size: .7em;
    font-style: italic;
    }
    .css-slideshow-attr a {
    color: #666;
    }
    .css-slideshow figure:nth-child(1),.css-slideshow figure:nth-child(2),.css-slideshow figure:nth-child(3),.css-slideshow figure:nth-child(4),.css-slideshow figure:nth-child(5),.css-slideshow figure:nth-child(6),.css-slideshow figure:nth-child(7) {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    }
    .css-slideshow figure:nth-child(1) {
    -webkit-animation: xfade 48s 42s 5;
    -moz-animation: xfade 48s 42s 5;
    -ms-animation: xfade 48s 42s infinite;
    -o-animation: xfade 48s 42s infinite;
    animation: xfade 48s 42s infinite;
    }
    .css-slideshow figure:nth-child(2) {
    -webkit-animation: xfade 48s 36s infinite;
    -moz-animation: xfade 48s 36s infinite;
    -ms-animation: xfade 48s 36s infinite;
    -o-animation: xfade 48s 36s infinite;
    animation: xfade 48s 36s infinite;
    }
    .css-slideshow figure:nth-child(3) {
    -webkit-animation: xfade 48s 30s infinite;
    -moz-animation: xfade 48s 30s infinite;
    -ms-animation: xfade 48s 30s infinite;
    -o-animation: xfade 48s 30s infinite;
    animation: xfade 48s 30s infinite;
    }
    .css-slideshow figure:nth-child(4) {
    -webkit-animation: xfade 48s 24s infinite;
    -moz-animation: xfade 48s 24s infinite;
    -ms-animation: xfade 48s 24s infinite;
    -o-animation: xfade 48s 24s infinite;
    animation: xfade 48s 24s infinite;
    }
    .css-slideshow figure:nth-child(5) {
    -webkit-animation: xfade 48s 18s infinite;
    -moz-animation: xfade 48s 18s infinite;
    -ms-animation: xfade 48s 18s infinite;
    -o-animation: xfade 48s 18s infinite;
    animation: xfade 48s 18s infinite;
    }
    .css-slideshow figure:nth-child(6) {
    -webkit-animation: xfade 48s 12s infinite;
    -moz-animation: xfade 48s 12s infinite;
    -ms-animation: xfade 48s 12s infinite;
    -o-animation: xfade 48s 12s infinite;
    animation: xfade 48s 12s infinite;
    }
    .css-slideshow figure:nth-child(7) {
    -webkit-animation: xfade 48s 6s infinite;
    -moz-animation: xfade 48s 6s infinite;
    -ms-animation: xfade 48s 6s infinite;
    -o-animation: xfade 48s 6s infinite;
    animation: xfade 48s 6s infinite;
    }
    .css-slideshow figure:nth-child(8) {
    -webkit-animation: xfade 48s 0s infinite;
    -moz-animation: xfade 48s 0s infinite;
    -ms-animation: xfade 48s 0s infinite;
    -o-animation: xfade 48s 0s infinite;
    animation: xfade 48s 0s infinite;
    }

    @keyframes xfade {
    0% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    14.67% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    16.67% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    }
    98% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    }
    100% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    }

    @-moz-keyframes xfade {
    0% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    98% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    100% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    }
    @-webkit-keyframes “xfade” {
    0% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    98% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    100% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    }

    @-ms-keyframes “xfade” {
    0% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    14.67% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    16.67% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    }
    98% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    }
    100% {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    }
    }
    @-o-keyframes “xfade” {
    0% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    98% {
    filter: alpha(opacity=0);
    opacity: 0;
    }
    100% {
    filter: alpha(opacity=100);
    opacity: 1;
    }
    }

    /*end Slide show code*/

  15. I’m trying to figure out how I actually upload the images to the html code…I’m new to this and learning as I go. Probably a stupid question but I’m obviously missing something. Haha. Thanks for the help in advance.

  16. Hi Mark,

    I love blog and I’ve read and followed all of your instructions and my slideshow is not showing at all. Can you help?

    Here is what I have in my index file:

    Media content Press releases

    Voice-overs

    Web Design and Graphics

    and here is what I have in my css:

    body
    {background-color: white;}

    .css-slideshow{
    position: relative;
    max-width: 495px;
    height: 370px;
    margin: 5em auto .5em auto;
    }

    .css-slideshow figure{
    margin: 0;
    position: absolute;
    }

    .css-slideshow figcaption{
    position: absolute;
    top: 0;
    color: #fff;
    background: rgba(0,0,0, .3);
    font-size: .8em;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity .5s;
    }
    .css-slideshow:hover figure figcaption{
    transition: opacity .5s;
    opacity: 1;
    }
    .css-slideshow figure{
    opacity: 0;
    }

    figure: nth-child(1) {
    animation: xfade 48s 42s infinite;
    }

    figure: nth-child(2) {
    animation: xfade 48s 36s infinite;
    }

    figure: nth-child(3) {
    animation: xfade 48s 30s infinite;
    }

    @keyframes xfade{
    0%{
    opacity: 1;
    }
    30.33% {
    opacity: 1;
    }
    33.33%{
    opacity: 0;
    }
    98% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }

    Where is my coding wrong?

    Thank you!

  17. Here is what I have in my HTML Index file. It didn’t take the first time.

    Media content Press releases

    Voice-overs

    Web Design and Graphics

  18. When I cut and pasted my code into your box, it just popped up with the slideshow captions, twice, not the code. How do I show you the code?

    1. Sorry, WordPress only allows a limited set of HTML tags to be used in comments. If you’d like you may use a service like pastebin.com or jsfiddle.net or jsbin.com to post your code, then give me that URL. Or email me at leemark at gmail dot com and I will take a look at it.

  19. Mark, you’re a real trooper for responding on your thread for as long as you have. I commend you for that!

    Something that I have wondered, the transition effect that occurs in my code happens too fast. How would I go about making the effect more smooth when changing to a different image?

  20. Hi Mark,

    I’m just learning CSS and am excited to animate without using JavaScript. I used a bit of your code and a bit from the w3schools.com reference page to cobble together a simple slideshow. The trouble I’m having is that the first time through, the images fade to white, then the next image pops on the screen. On subsequent views, they transition as expected. I’m wondering if it is because the site hasn’t downloaded the images yet? Any ideas how to fix this?

    -J. Olson

  21. This is very good and it works for me.

    I would like to adapt this to serve as a slide show.

    The slide show needs to have just one background image, or just a background color, or a gradient. The text should appear on it by fading in, or from side, or top, etc.
    In your model text appears as caption only on hover.

    I have tried to modify it but could not make it work the way described above.
    If any one can post the code to do the above it will be very useful.

    I found several slideshows using java script but not in pure css. A round about way will be to make several images using same background with superimposed text, but the text becomes blurry and does not resize well.
    Thanks.

  22. Hello,
    I seem to have the same problem Kenneth had in February.
    Also with me the links at the pictures work fine in Firefox but not with Chrome.
    I only get the link from the first image in Chrome no matter where the slideshow is . Unfortunately his solution didn’t work for me.
    I am a complete rookie so that might have something to do with it :)
    I’ve tried many things, also with the z-index but nothing seems to fix this.

    Do you have any tips or advices?
    Thanks a lot!

  23. Hi Mark… haven’t seen a post since July 22, I hope you are still kicking this slideshow around. Two questions: 1. I use WordPress to edit a website and there’s a plugin called Shadowbox that wants to take over every image and put it in a shadow box. Will there be a bossy attitude from this shadow box, meaning will it want to frame my slideshow? Or is that a good thing? Will there be a compatibility problem with your code and WP? I read in your blog someone had problems with WP.
    2. I want to do a simple image rotation on our home page of four images that are a sneak peak of our upcoming holiday ballet. No start button, no controls, just want it to start automatically and play repeatedly.
    Should be easy? I am not real strong with coding. I am wanting to give this a try. I played with it and got four images all stacked one after another with the shadowbox empty. I really don’t know what I’m doing. Is it possible to get a copy of this simple code and I just swap my four photos in? Thank you so much for this blog and giving us out here some hope!

  24. Hello Mark;
    Please I do not understand the “Timing of Animation”. Especially when you have
    8 slides for 6 seconds each.
    Thank you.

  25. Hi,

    Great article, very helpful.

    Out of interest how would you approach adding a different link to each image?

    I’ve tried a few different methods but always end up with the slideshow only leading to the last link in the code. Any ideas from anyone greatly appreciated.

    Thanks.

  26. Hi Mark,

    Really nice tutorial! I have learned many thing from it.

    While i am making a banner using the same concept, i am stuck a some a point. Could you please help me out with number of iteration for animation. How to stop animation after specific number of loops.

    Thanks,
    Manoj

  27. We’re a group of volunteers and starting a new scheme in our community.

    Your web site provided us with valuable info to work
    on. You have done an impressive job and our entire community will be grateful to you.

  28. Hello Mark. Great post, thanks. One thing though. I have being trying to work on varying the number of images and the time each image is shown. One of the problems I ran into was where you say: “Why 16.67%? Because 100% divided by 6 (the total number of slides) is 16.67%.” Of course the number of slides is 8; 6 is the number of seconds each slide is displayed for…

  29. Works great — for 5 cycles… (I’m using Chrome)

    We used to have a Flash animation that cycled through 4 photos. Our real web guy got rid of it since Flash is apparently going away.

    Since we really want that instead of a static photo, I did some quick searching and found your solution here. I copied your page code (just the stuff for the slideshow) and tried to play with it, removing captions (not needed) and reducing to 5 of my own pix, changing the timing. After the first cycle, it would show a blank for the specified time (7s) then it would show blank in between each photo (3 sec blank, 4 sec with picture).

    So, I started over, keeping everything. The only change I made was to sub out 8 local jpg’s for your img links.

    It worked! For a while anyway. I just left it running there and then I noticed that it had started showing a blank. Hmmmm…

    I looked at your page again and yours does the same thing. On the 6th cycle, the final picture is not shown but just a blank instead (for 6 seconds). It seems to remain stable after that, showing only the first 7 pictures then a blank for 6 seconds…

    I only know enough “coding” to get myself into trouble. But I’m hoping our real guy can use your code to restore our site’s animation.

    THANKS!

    1. Hi Mike, thanks for pointing that out, your description really helped me figure out what was going on. There was a typo in my code for the animation for the first figure (the last slide), it looked like this:

      .css-slideshow figure:nth-child(1) {
      -webkit-animation: xfade 48s 42s 5;
      -moz-animation: xfade 48s 42s 5;
      -ms-animation: xfade 48s 42s infinite;
      -o-animation: xfade 48s 42s infinite;
      animation: xfade 48s 42s infinite;
      }

      See how for both the -webkit-animation and -moz-animation properties it has a “5” instead of “infinite”. That’s the number of times that the animation is supposed to loop, which is why just the one slide stopped appearing on the 6th cycle. Anyway, if you change both of those to ‘infinite’ instead of ‘5’ then it should work correctly for you. I’ve updated the code in this post.

  30. Hi Mark. There is now a gap between the images showing. I think your original code was right (100 / 6) – it was just the explanation that needed changing. I have generated the CSS in PHP so I can just give it the number of images and the number of seconds for each to be displayed and the CSS is automatically adjusted. My aim is to point the script at a directory of images and for it to count the number of images and calculate the maximum size as well, but I’m only part-way there.

    1. Hi again Graham,
      I’m pretty sure it was this issue here which should be fixed now. Your PHP script sounds like an excellent idea, if you would like to share it when you get it done, please let me know!

      1. Hi again Mark
        I think I understand the timings at last! I have a simplified version of your image rotator here:
        http://gandalf458.co.uk/image-rotate/
        It is missing the captions, although I guess these could be added using text files in the images (or another) directory. That will be another project!

        If anyone is interested the PHP script is at:
        http://gandalf458.co.uk/image-rotate/index.zip
        Any comments about the script or the code it produces would be welcome.

  31. Hi Mark,

    I am new to the animation and keyframe side of css. I have your slideshow working on this site:
    https://demo.insitebanking.com/OLBanking19/Pages/Default.html
    It was working pretty well, then I added in the z-indexes you spoke of because I wanted the images to go to different pages. It worked great!

    The only problem I have run into is that now I see the images fade to white (or transparent since my background is white) instead of fading into each other. Any ideas? You may notice I don’t have all the webkits hard coded, I have a script in the background running to automatically put them in where needed.

    Appreciate any advice you can offer.

      1. Thanks for the response Mark. I took a look at the stack overflow answer and it helped with the understanding a great deal.
        After staring at the animation for a few minutes I realized my problem is a bit more complex, it seems that the first run through the images still fade to white and the next pops in. But after the first run through it behaves more like it should with crossfading and only slightly “jumpy” between images. Because of this I have a suspicion that I need to speak with the administrator running the background code for the site as it might have and issue there.

        1. I have the same problem as you Kristen. The first run it fades into the white background, second run no problem, it fades into the next photo as it should.
          Did you find any solution on this?

          1. The same problem with me: First cycle is jumpy, the others are fine. And the animation I see in the article has the same problem too. Is it for everyone?

  32. hey mark,
    css newbie here. i was really excited to find your page. i thought i’d followed your advice and instructions to a T but my slideshow doesn’t seem to flow very well — as one photo fades out (niiiice!) the next one pops out of nowhere (nooooo!). not very smooth. any suggestions? thanks in advance!

    http://test.xlmultimedia.com/limelight/home.html

      1. hi mark, no never got it resolved. it seems the issue i was having disappeared once the slideshow completed its first go-around. so i tried preloading images but that didn’t seem to help either. because of time constraints i decided to go another route. thanks though.

  33. Hi Mark,

    I have an issue using the code in dreamweaver (which is where I am building my website). I have created a completely clean page to test the code, putting the html into my index page and the css (from github) into an attached style sheet. I can see the elements within dreamweaver but once I preview it in a browser, nothing shows! Is there something obvious I am doing wrong? I really hope I can get it resolved as this is exactly what my site needs!

    Thanks,

    Rob

  34. Hey Mark,

    I’m wondering what went wrong on what I did, instead of performing a slideshow, the images ended up popping on the screen! Can you tell me what’s wrong?

  35. Hey Mark,
    Thank you for explaining the code in detail. It helped me a lot. Creating slideshow is easy now. Good work Mark.

  36. Hi Mark, very interesting article. I am trying to search for a slideshow that will accept css background images. Any ideas please.
    Regards
    Tony

  37. do you have an html and css only (no xxx.js files) version of a pushbutton slideshow (i.e. I control when to show the next image)?

    Thanks

  38. Mark,

    In one of your earlier replies you mentioned that this same slideshow effect can be accomplished; and be compatible with older browsers, with a few lines of jquery. Would you mind referencing how?

  39. Hello Mark,
    This is an awesome tutorial. I have been searching for this for a while now. I’m mostly a javascript person, but with the GPU advantages of using CSS, I think I will go with this even if i have to define all the values. Thanks

  40. Hi Mark,
    I have used your code pen to create a website with the slideshow. However, the images appear stacked above the slideshow and the area for the slideshow remains blank. I am using chrome. When I use IE and Firefox, the slideshow appears but the images remain stacked on top of the slideshow. Please tell me what I am doing wrong and how to fix it. Thanks in advance.

  41. Wow bro this is really nice slider. I was looking for something really light and this is it. I’m using it at 100% width and it works well as responsive slider too. my pages load really fast since it is all css. Really good job. Very simple and works really well.

  42. Hey Mark,

    it’s working, more or less.
    If I use for example 3 or 4 pictures, I’ve a long time without any picture….
    Don’t know what to do, hope you can help me.
    Use Joomla 3.

  43. Love the script!
    How do you get more than 1 slideshow to play onm the same page same time?
    Tried changing
    .css-slideshow {
    to
    .css-slideshow1 {
    .css-slideshow2 {
    etc without sucess. Im usung firefox on linux

    Thanks for your assistance!

  44. I played with the srcipt last night and got 2 slideshows working together.
    I would however like to slow it down some and make it appear a smoother transactions between pictures.
    I changed the rate from 48 secs @ 6 sec intervals, to 80 secs @ 10sec intervals

    thank you for your time!
    john

  45. Hey!
    Thanks for this! I was just curios, with this code can I add a couple links to the images? The link would change with the image.

    thanks again

  46. Mark, thanks for the great tutorial. As I understand it, when the page loads, all the images are visible, meaning that they’re stacked up, hiding behind the top image in the stack. As each image from the top-down takes it’s turn fading out, it reveals (fades-in) the image below / behind it.

    My code is very similar to yours, except I have 12 images. Unfortunately each of my fade-out’s reveals only empty space for a moment, until the next image appears. Despite lots of Googling, I can’t figure out why I don’t have a smooth fade-in, fade-out like your example. Could you take a look at my code?

    (May need to view in up-to-date browser; works for me in Safari 6.1.6 and Chrome 41.0.2).

    http://www.personal.psu.edu/axp5378/narration.html

    .css-slideshow{
    position: relative;
    max-width: 600px;
    height: 600px;
    margin-left: 20px;
    }
    .css-slideshow figure {
    margin: 0;
    position: absolute;
    }
    .css-slideshow figure {
    opacity:0;
    }

    figure:nth-child(12) {
    animation: xfade 72s 66s infinite;
    -webkit-animation: xfade 72s 66s infinite;
    }
    figure:nth-child(11) {
    animation: xfade 72s 60s infinite;
    -webkit-animation: xfade 72s 60s infinite;
    }
    figure:nth-child(10) {
    animation: xfade 72s 54s infinite;
    -webkit-animation: xfade 72s 54s infinite;
    }
    figure:nth-child(9) {
    animation: xfade 72s 48s infinite;
    -webkit-animation: xfade 72s 48s infinite;
    }
    figure:nth-child(8) {
    animation: xfade 72s 42s infinite;
    -webkit-animation: xfade 72s 42s infinite;
    }
    figure:nth-child(7) {
    animation: xfade 72s 36s infinite;
    -webkit-animation: xfade 72s 36s infinite;
    }
    figure:nth-child(6) {
    animation: xfade 72s 30s infinite;
    -webkit-animation: xfade 72s 30s infinite;
    }
    figure:nth-child(5) {
    animation: xfade 72s 24s infinite;
    -webkit-animation: xfade 72s 24s infinite;
    }
    figure:nth-child(4) {
    animation: xfade 72s 18s infinite;
    -webkit-animation: xfade 72s 18s infinite;
    }
    figure:nth-child(3) {
    animation: xfade 72s 12s infinite;
    -webkit-animation: xfade 72s 12s infinite;
    }
    figure:nth-child(2) {
    animation: xfade 72s 6s infinite;
    -webkit-animation: xfade 72s 6s infinite;
    }
    figure:nth-child(1) {
    animation: xfade 72s 0s infinite;
    -webkit-animation: xfade 72s 0s infinite;
    }

    @-webkit-keyframes xfade {

    0% {
    opacity: 1;
    }
    6.3% {
    opacity:1;
    }
    8.3% {
    opacity: 0;
    }
    95% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
    }

  47. Hi Mark,

    Great code! I did however find the first line in:
    .css-slideshow:hover figure figcaption{
    transition: opacity .5s;
    opacity: 1;
    }
    a bit unnecessary. The transition is only being used by the figcaption and since it was defined in that block, it no longer needs to be defined again especially if you were to set it to “transition: opacity .5s ease;”.

    Just thought id point that out for people who will be using this as well. So just the “opacity: 1;” will do the exact same thing.

    1. I made a HUGE improvement.
      This update makes it less messy and omits a couple of unnecessary lines of code.
      This one preloads the images that way you don’t see the white gap after every image changes during the first round. However at the beginning you do see all the slideshow images load quickly so i’m seeing if i can do something about that but it isn’t that big of a problem.

      
      				
  48. Great example, Mark. Many thanks.

    A bit of tweaking in the animation timers removes the gaps between images in the first cycle:

    @keyframes xfade{
    0%{
    opacity: 0;
    }
    2%{
    opacity: 1;
    }
    12.5% {
    opacity:1;
    }
    14.5%{
    opacity: 0;
    }
    100% {
    opacity:0;
    }
    }

    Fred

  49. Thanks for the slideshow code. I was just wondering, how can I increase the size of the content box with the images so it takes up more space? I’ve tried increase the width and height, but the box just stays the same size

  50. Hey thanks for the tutorial, the first cycle works great, but on round number 2 the images start skipping order and even going backwards….is there something I can add on or remove to fix this?

  51. Hi,
    Thanks for the nice slideshow, I’m using it but having a simple issue : I have only 4 pictures and when i delete the other 4 extra, my fade effect doesn’t work smoothly. the gap b/w the pics is too long. how do I time the xfade and duration for 4 pics only.
    Also , how do you make the caption stay on the pic the whole time it is displayed , and cancel the mouseover?
    Thank you again, it is so nice of you to answer our questions.
    Eli

  52. I combined the timings of the article and Fred’s comment to make a version that cycles between three div tags, and also fixes the fact that the images do not cross-fade correctly the first time. This version immediately displays the first div (unlike Fred’s version, which fades it in) and cross-fades the divs correctly the first time through (unlike the version in the article, which fades the old image out then immediately pops the next one in on the first round.) Also, on IE 9 and below,which does not support the animation property in CSS, it just displays the first div. Just about anything can be put in the divs (images, text, whatever.) Here is the link: http://cssdeck.com/labs/aqiar5i4

    Here is the CSS:


    .css-slideshow{position:relative;height:202px;}
    .css-slideshow figure{position:absolute;}
    .css-slideshow figure{opacity:0;}
    figure:nth-child(3) {animation:xfade3 48s 32s infinite;-webkit-animation:xfade3 48s 32s infinite;-moz-animation:xfade3 48s 32s infinite;-ms-animation:xfade3 48s 32s infinite;-o-animation:xfade3 48s 32s infinite;}
    figure:nth-child(2) {animation:xfade2 48s 16s infinite;-webkit-animation:xfade2 48s 16s infinite;-moz-animation:xfade2 48s 16s infinite;-ms-animation:xfade2 48s 16s infinite;-o-animation:xfade2 48s 16s infinite;}
    figure:nth-child(1) {animation:xfade1 48s 0s infinite;-webkit-animation:xfade1 48s 0s infinite;-moz-animation:xfade1 48s 0s infinite;-ms-animation:xfade1 48s 0s infinite;-o-animation:xfade1 48s 0s infinite;}
    @keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-webkit-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-moz-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-ms-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}

    1. Hello guys!

      Looking at the original code, then Fred’s comment, then yours I got this idea:

      Isn’t the initial “white gap” caused by the fact that figure starts with opacity: 0; and when the animation starts it assumes it was 1?

      So if you only change the opacity to 1 at the static part of the CSS, there is no gap, no initial fade-in and no need for multiple animation definitions.

      Much neater. :)

  53. I combined the timings of the article and Fred’s comment to make a version that cycles between three div tags, and also fixes the fact that the images do not cross-fade correctly the first time. This version immediately displays the first div (unlike Fred’s version, which fades it in) and cross-fades the divs correctly the first time through (unlike the version in the article, which fades the old image out then immediately pops the next one in on the first round.) Also, on IE 9 and below,which does not support the animation property in CSS, it just displays the first div. Just about anything can be put in the divs (images, text, whatever.) You can find the code here.

    And here is the CSS:


    .css-slideshow{position:relative;height:202px;}
    .css-slideshow figure{position:absolute;}
    .css-slideshow figure{opacity:0;}
    figure:nth-child(3) {animation:xfade3 48s 32s infinite;-webkit-animation:xfade3 48s 32s infinite;-moz-animation:xfade3 48s 32s infinite;-ms-animation:xfade3 48s 32s infinite;-o-animation:xfade3 48s 32s infinite;}
    figure:nth-child(2) {animation:xfade2 48s 16s infinite;-webkit-animation:xfade2 48s 16s infinite;-moz-animation:xfade2 48s 16s infinite;-ms-animation:xfade2 48s 16s infinite;-o-animation:xfade2 48s 16s infinite;}
    figure:nth-child(1) {animation:xfade1 48s 0s infinite;-webkit-animation:xfade1 48s 0s infinite;-moz-animation:xfade1 48s 0s infinite;-ms-animation:xfade1 48s 0s infinite;-o-animation:xfade1 48s 0s infinite;}
    @keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-webkit-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-moz-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-ms-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}
    @-o-keyframes xfade1{0%{opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}98% {opacity:0;}100%{opacity: 1}}

    @keyframes xfade2{0%{opacity: 0;}2% {opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}100% {opacity:0;}}
    @-webkit-keyframes xfade2{0%{opacity: 0;}2% {opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}100% {opacity:0;}}
    @-moz-keyframes xfade2{0%{opacity: 0;}2% {opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}100% {opacity:0;}}
    @-ms-keyframes xfade2{0%{opacity: 0;}2% {opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}100% {opacity:0;}}
    @-o-keyframes xfade2{0%{opacity: 0;}2% {opacity: 1;}33.33333% {opacity:1;}35.33333% {opacity: 0;}100% {opacity:0;}}

    @keyframes xfade3{0%{opacity: 0;}2% {opacity: 1;}31.33333% {opacity:1;}33.33333% {opacity: 0;}100% {opacity:0;}}
    @-webkit-keyframes xfade3{0%{opacity: 0;}2% {opacity: 1;}31.33333% {opacity:1;}33.33333% {opacity: 0;}100% {opacity:0;}}
    @-moz-keyframes xfade3{0%{opacity: 0;}2% {opacity: 1;}31.33333% {opacity:1;}33.33333% {opacity: 0;}100% {opacity:0;}}
    @-ms-keyframes xfade3{0%{opacity: 0;}2% {opacity: 1;}31.33333% {opacity:1;}33.33333% {opacity: 0;}100% {opacity:0;}}
    @-o-keyframes xfade3{0%{opacity: 0;}2% {opacity: 1;}31.33333% {opacity:1;}33.33333% {opacity: 0;}100% {opacity:0;}}

    You can see it in action on my website: jacobspctuneup.tk

    Note that I have a long delay set for the transition, so you will have to wait a while to see the transition.

    1. Hey Jacob,

      I am also experiencing the ‘flashing’ between images in the first run and am eager to make use of your solution but I am wondering about the logic behind it since I need to extend this to work with 6 images.

      How do you approach the keyframe timing? Is there some kind of formula I culd use?

      Thanks & regards,
      Henning

  54. Hi mark,

    All the codes are working for me in the browser. The images are fading also. But they are stacked one after another from top to bottom. How can I fix this?

    This is my css code

    css-slideshow{position: absolute;max-width: 495px;height: 700px;margin: 5em auto .5em auto;}
    css-slideshow figure{margin: 0;position: absolute;}
    css-slideshow figcaption{position: absolute;top: 0;color: #fff;background: rgba(0,0,0, .3);
    font-size: .8em;padding: 8px 12px;opacity: 0;transition: opacity .5s;}
    css-slideshow:hover figure figcaption{transition: opacity .5s;opacity: 1;}
    css-slideshow figure{opacity:0;}
    figure:nth-child(1) {animation: xfade 18s 12s infinite;z-index:10;}
    figure:nth-child(2) {animation: xfade 18s 6s infinite;z-index:10;}
    figure:nth-child(3) {animation: xfade 18s 0s infinite;z-index:10;}

  55. This is really good thank you very much, is there an easy way to add link(s) below the slideshow which return to the individual images of the slideshow?

  56. Is it possible to set each image to have an anchor? Simple attempts haven’t worked (e.g. surrounding each with an anchor.

  57. Hi Mark, I’m still a beginner student beginner at this but I’d like to ask you a question.

    For the width and height, you had a specific height but I want my slideshow to fit automatically into the container or box perfectly in my html.

    but somehow the slideshow always hang off the container and covers the contents of what’s on my page.

    i just want to make my page resizable so when i resize the window everything resizes automatically.

    THX

  58. Hi Mark , I thank you for this codes this would help me for my studies . You are my answered prayer , awesome !!! Btw, a million thanks :)

  59. Hi Mark,

    Thanks a lot for sharing this excellent Slideshow with everybody.
    I took advantage of the scripts to create my own.
    Mine has 12 images per slideshows (3) each running 3 seconds
    All works great AFTER the first set of images as loaded.
    If you take a look at the URL, you will see that there is a white delay on the first set…
    I tried everything I could think of but I’m omitting something, somewhere :)
    100 / by 12 is 8.33%, I set the value of 66.33% by deduction, seeing that you subtracted 2 on all demo posted and left 98% as is.
    Also, you did not assign a value for the 8th child so I did not assign one to the 12th child on my css…
    Would you be so kind has taking a look and tell me how to fix this?
    I really love it and would like to use it :)

    Thank you for your time.

    Best,
    Brigitte

  60. Hi Mark,

    When I am using it .png files… at the begining all the images are displayed and it works well after the first loop is over.

    Can you pls help.

  61. Hello!

    I’m taking a web-design class (and have no prior experience with coding of any sort), and our professor had us use your slideshow script for our sites.
    The slideshow works great! Thanks for creating this.
    I’m having some trouble with a figcaption on the slidebox, and I was wondering if you had any tips for fixing it.

    The figcaption on my slideshow changes size appropriately in the tablet and cellphone sizes, but in the desktop size the caption is too large. I tried to fix this issue in the slideshow.css file by adding a media query for the desktop (http://people.oregonstate.edu/~chrissam/about/slideshow.css [line 83]), but it doesn’t seem to respond to this query. I’ve also tried to fix it in my main css file in the in the desktop media query – but to no avail.

    I know this doesn’t necessarily apply to your script, but any help would be awesome!

    Thanks for your time,

    Sam

  62. Mark,

    Great tutorial. I was able to get the slideshow working great, however, I’m having trouble centering images. So some of the pictures aren’t as wide and I want them to be positioned in the center. Can you help me out with this?

    1. You can use a variation of my version (see my previous comment), as it cycles divs, so if you put the img tags in the divs, you should be able to apply any CSS code to the tags to center the images in the divs as you would in a regular div. If you need help with the correct code for centering the images in divs, see howtocenterincss.com.

  63. Hi Mark,

    I recently created a slideshow using the HTML/CSS you have provided here and it works very well, thanks. However, instead of clicking to advance the slides, I have them set on a timed infinite loop. I was curious, do you know of any HTML/CSS markup that would allow me to click on the slideshow in order to pause and then unpause it?

    Thanks,
    Dan

  64. Hi,
    Hope you r doing well.
    I liked the gallery slideshow which is mentioned in the link below.
    http://codepen.io/leemark/pen/dbkjy

    But problem is I am unable to fix the position. As it is hiding my drop down navigation menu. I am not a technical person. So I am seeking for help.

    And I just like to know that can I modify it with my pics and captions and use it for commercial purposes.

    Thanks & regards,
    Shruti

  65. Hello!

    Thanks for a very clear tutorial. I am having the same centering issue as Douglas above. Is there a way to center the images when they are different widths/orientations?

    Thank you!

  66. Thanks for your , please i want to add some Test or list beside these slide show who can i do it without any problem can you help ?

  67. Hi Mark
    Great tutorial, I hope you could help me with my issue in my page.
    I want to do a slideshow for an art gallery where each artist has a different number of pieces of art, so the number of images in the slide show would be different for each of them.
    Is there a way to do that just in css, do i have to use Javascript or different slide shows for each artist?
    Any tip would be very helpful since im not exactly a graphic desingner ;P
    Thank you very much
    Ellishia

  68. Hi Mark,

    Firstly, thanks a lot for this, it is very helpful.

    I’d like to ask you some advice. I managed to get the slideshow to work in Firefox but on the first loop each image fades to white before displaying the following image. From the second loop and on it fades correctly to the next image.

    In addition to the fading problem, in safari some images don’t show up during the first loop.

    What could be causing this?

    Regards,
    Thomas

  69. hai mark
    can i get a transaction and fading effect like this site “http://wowslider.com/”?
    Can u please give this code?

  70. I know this is an old post but you’re setting the height of the slideshow here manually, which makes it work fine for desktops but isn’t mobile-responsive. The way to make it mobile-responsive is to clear the absolutely-positioned child elements.

    However I’m having trouble with this, as the methods I’ve tried at https://css-tricks.com/snippets/css/clear-fix/ like:

    .group:after {
    content: “”;
    display: table;
    clear: both;
    }

    when applied to the parent div.css-slideshow aren’t properly clearing the children. Can you help me/us find a solution for this? Thanks a bunch!

    1. Hi Kevin,
      That’s a great question! Here’s one approach to making a responsive version: http://codepen.io/leemark/pen/MyZmYp/

      You were totally on the right track by using that clearfix CSS on the .css-slideshow container. The other major changes are removing the height and width attributes in the HTML, and then back in the CSS giving the figure elements a width of 100% and a height of auto, and changing the positioning of the figures from absolute to float: left.

      That last bit is because absolute positioned elements can’t be cleared (even using that clearfix code), but floated elements can. That breaks the layout a bit since the slides no longer stack atop one another which is why you see the funky margin-left: -100%, pulling each slide off to the left, and then using a transform to push it back into position.

      It’s a bit of a hack, but ¯\_(ツ)_/¯.

      Here’s a diff of the CSS changes: http://screencast.com/t/HiY8Cl8Dwy

      Let me know what you think, and again I just want to add the disclaimer that this was never intended to be a robust slideshow solution for production work, but more as just a proof-of-concept/thought experiment to see how much was possible with no JS :)

  71. Hi There!

    I was wondering if there’s any way to put such a crossfade transition within a CSS shape. I’ve been trying to figure this out for a week. I can place an image within a div that is shaped like a polygon, but as soon as I place this within it, the images overflow, even with overflow being hidden.

    Any ideas?

    Thanks!
    Bryan

  72. Hi Mark,

    You absolutely saved my life with this fabulous code and instruction. Thank you so much and it worked perfectly. However, I’m trying to change the color of some of the letters in the text and tried adding some tags in the html, but it didn’t work. Do you have any suggestions on how I can do it with the html you provided? Thanks so much, again. You totally rock and so glad I found your blog!

  73. Hi Mark,

    Your code helped me a lot , but after one iteration of the slideshow its taking too long to start the slideshow. Help me how to resolve this issue.

  74. Hi Mark,

    Yours is amazing.
    But how do I put an external link to every picture in the slideshow ?
    I mean I want the pictures to link to the another page of the website when I click it.

    Thanks

  75. Hi Mark,

    Yours is amazing.
    But how do I put an external link to every picture in the slideshow ?
    I mean I want the pictures to link to the another page of the website when I click it.

    Thanks

Leave a Reply to Sam Cancel reply

Your email address will not be published. Required fields are marked *

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