Responsive CSS3 Fade-To-Black Slideshow
A CSS3 fade-to-black slideshow, powered with a few lines of JavaScript. Images are pulled from a folder using PHP.
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. The relevant PHP is provided below.
PHP Code
The slideshow is generated from a folder of images like this;
<div id="slideshow">
<?php
$imgs = glob('relative/path/to/images/*.{jpg,jpeg,png,gif}', GLOB_BRACE); // get all imgs from folder
foreach ($imgs as $img) {
echo "<img src='$img' alt='' />\n";
}
?>
</div>
Related
- Responsive CSS3 Cross-Fading Slideshow (background-image)
- Responsive CSS3 Cross-Fading Slideshow (<img> tags)
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.