A simple crossfading slideshow made with CSS

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

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.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

figure:nth-child(1) {

animation:xfade48s42sinfinite;

}

figure:nth-child(2) {

animation:xfade48s36sinfinite;

}

figure:nth-child(3) {

animation:xfade48s30sinfinite;

}

figure:nth-child(4) {

animation:xfade48s24sinfinite;

}

figure:nth-child(5) {

animation:xfade48s18sinfinite;

}

figure:nth-child(6) {

animation:xfade48s12sinfinite;

}

figure:nth-child(7) {

animation:xfade48s6sinfinite;

}

figure:nth-child(8) {

animation:xfade48s0sinfinite;

}

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

Related

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

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

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

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

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?

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

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?

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.

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)

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?

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?

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.

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.

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.

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!

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.

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

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:

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:

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?

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

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.

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.

Sorry for the messy posts Mark. Im having the same issues as Niels. This page: http://chromafunk.com/viridis.html – works fine in mozilla but not in chrome. I just get the white page. Any ideas would be hugely appreciated.

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.

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.

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

Hi Josh, it could be that the example code in the blog post doesn’t contain all the necessary vendor prefixes (like -webkit-). Here’s the full working CSS with all necessary browser prefixes: https://gist.github.com/leemark/11237860

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.

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.

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.

Actually I may not need to see your HTML, from looking at your CSS I suspect that what is wrong is that you need the full vendor-prefixed code instead. You can get that here: https://gist.github.com/leemark/11237860

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?

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.

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.

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!

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…

Right, thank you Graham! I screwed that up, I will edit that section. If it helps, here’s a Stack Overflow answer that does a better, more concise job that I did explaining the timing: http://stackoverflow.com/a/22548541.

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.

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.

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.

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!

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!

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.

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.

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!

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.

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!

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

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.

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.

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

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

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

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.

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.

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

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

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

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.

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 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 :)

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!

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?

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.

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?

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

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.

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.

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.

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 :)

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.

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!