Responsive CSS3 Cross-Fading Slideshow (<img> tags)

A CSS3 cross-fading slideshow, powered by a few lines of JS. Each slide is a standard <img> tag.

It uses one set of images. Here's a demo using background-images and media queries to serve smaller images to mobile.

Works in modern browsers and IE9+ (no fade effect in IE9). IE8 users will just see the first image.

Please view the source of this page for HTML markup, CSS and JS.



Automate this demo using PHP to pull all images from a folder. See the Responsive CSS3 Fade-To-Black Slideshow for code.

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.