Pure HTML+CSS Slideshow
Learn to create elegant cross browser slideshows with clickable images, captions and links using pure HTML and CSS codes.
Here is the HTML/CSS based slideshow in action.
Relaxing calm waters back home in Samboan, Cebu, Philippines.
To use, hover your mouse over the thumbnails then you will see corresponding slide that contains a hyperlinked image and a caption. Click on the image to see the full image view in a new window.
It works great when viewed on iPhone too. You just have to click a thumbnail to see the slide and it will stay on view without hovering.
It demonstrates the use of CSS child selector: ">" and dynamic pseudo class: ":hover" on "<li>" which are supported by major browsers such as Internet Explorer 7+, Firefox 2+, Safari 3+, Chrome, and Opera 9.51+.
Very easy to implement. Just copy the relevant HTML and CSS codes and paste them into your web page. Very flexible that you can put any valid html codes in the slides (in between <div> inside <li> tags) to make it show anything you like. For example, an iframe that shows a website. Cool!
And ultimately, display multiple slideshows in a single page. You just have to create multiple slideshow class DIV blocks in your HTML code
Now, download the complete source code that made that above slideshow possible.