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.
![](_images/1024x500/1.jpg)
![](_images/1024x500/2.jpg)
![](_images/1024x500/3.jpg)
![](_images/1024x500/4.jpg)
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.