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.

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.

The slideshow can be an alternative but less comparable to Javascript or Flash driven slideshows. Its glory shines in situations where Javascript or Flash are disabled in users' browser.

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.

Comments

Add New

Mr. Nobody  - Not satisfied 2009-01-17 04:26:06 This is NOT a SLIDESHOW. This in interactive IMAGE GALLERY. The Slideshow is AUTOMATIC. The images should change with certain interval. Like in every two seconds or so.. Nice job, but this is just an another hover-tutorial.. not "Pure HTML/CSS SLIDESHOW". :( ...I was so anxious about the link, but the information was disapointing... :/ Reply | Quote

Virgil  - What is a slideshow? 2009-01-17 04:24:41 The slideshow you are talking about is a timed slideshow which uses Javascript or any web programming language to automatically advance slides in certain amount of time intervals. Any presentation that uses slides is called a slideshow. An image gallery that presents images into slides is also called a slideshow. What makes this slideshow unique is that each slide can contain any valid html codes, purely built using html/css, can run in browsers without Javascript support, and very easy to implement. It can be used by any scripted slideshows as an interactive degradation, rather than seeing still, unresponsive and for some, a broken slideshow. Here is a slideshow that automatically changes slides in intervals: http://www.jampmark.com/virtuemart-product-slideshow.html Reply | Quote

projectautomatika  - neat 2009-01-19 18:10:55 This one's a neat design. Thanks for sharing. Reply | Quote

Roger  - I can't see thumbnails 2009-01-21 23:43:46 I can't see the thumbnails here or in the page displayed from the downloaded source text. Reply | Quote

Virgil  - Set browser to show images 2009-01-22 02:58:15 Perhaps your browser wasn't set to show images? Let me know. Reply | Quote

Roger  - Seeing Main Image Only 2009-01-22 03:08:17 I'm seeing images, such as the picture of the lake. I just don't see any thumbnails anywhere on the page that I could hover over to see a different picture. I know there are supposed to be four different pictures. Reply | Quote

Virgil  - Which browser are you using? 2009-01-22 04:17:07 Can you tell me which browser and version you are viewing the slideshow with? Reply | Quote

Roger  - IE Version 2009-01-23 00:03:25 I'm using Internet Explorer version 6.0. I'm only seeing the starting picture, not a slide show, and the four pictures (thumbnails, I presume) are not showing themselves anywhere. Reply | Quote

Virgil  - IE7+ or better browsers 2009-01-23 03:34:35 It works on IE7 and up. If you're having problems upgrading IE, you can download better browsers like Firefox, Google Chrome or Safari. They are faster, more user friendly and free to use. Reply | Quote

Randal Oulton 2009-02-08 11:29:40 We had to put up a website recently using this kind of code that worked only with IE 7 and up. Within two weeks, a lot of complaints came in. A lot of stakeholders using the site worked in organizations where they weren't authorized to upgrade from IE 6 or install alternative browsers. So beware of what your stakeholders use! Reply | Quote

pire  - thanx 2009-03-05 12:22:26 thanxxxx Reply | Quote

Martin 2009-03-13 20:51:16 IE 6 here also! personally don't recommend anyone to use this script, you can say "go *download newer browser" to 5% people, but how many you think still use IE 6 ? might be more than that. Reply | Quote

Giuseppe  - neat code 2009-03-19 17:35:07 This is a very nice example of advanced use of HTML/CSS. The word "advanced" makes needless to say that it should not be judged based on whether it works on IE6 or not. Virgil expressly lists browsers on which this works. Be sure your criticism is appropriate and then express it! Reply | Quote

ssetnaek  - possible to have a large main image? 2009-04-28 20:39:47 I like the simplicity of this idea but wondered if it's possible to have a large main photo in the image area. I'd like to use the idea on several almost identical pages without having to create new CSS for every one so that eliminates background images. Reply | Quote

Kyle  - Question 2009-05-03 01:20:12 hey, this is pretty neat. I was just wondering; is there a way to set it up so that once you cursor off the image area the picture doesn't disappear? Thanks in advance :) Reply | Quote

cambrian 2009-05-23 20:37:55 thank you Reply | Quote

makonz  - can't make the code work in IE8 2009-06-22 02:44:57 Hi, this is a great code, and thanks for making it available. It works brilliantly in Firefox but even though I'm running the latest version of IE, it won't show the thumbnails or hover. I don't understand why, when this page (your one) views correctly. I'm using a separate stylesheet for IE, but exactly the same code for both browsers. Is there something I've missed? Reply | Quote

Virgil  - Put a DOCTYPE 2009-06-22 20:20:33 Hi, please put any doctype at the beginning of your html page. Even like the one below alone will do: <!DOCTYPE> it's an IE thingy. Reply | Quote

makonz  - thank you! 2009-06-22 22:31:50 You're brilliant, I had the wrong doctype. It works now. Thanks a bunch. Reply | Quote

frank  - Multiple Images 2009-06-23 04:29:32 Hi thanks for this interesting article, how about if i'm goin to use more than 4 pictures it actually destroy the layout if i use more than 4 images...any way i can work around this? perhaps a scroll bar when the images are larger than the container? thanks much Reply | Quote

Virgil  - Increase Image Size 2009-06-23 15:24:39 hi, you can increase the size of your div container to fit the thumbnails and increase the larger image size to fill the container. Reply | Quote

max 2009-07-09 04:46:25 this looks great but like "kyle" above, i am wondering if it can default to showing an image when you mouse off of the area? maybe instead of the black background, an image could live there instead? any thoughts on how to make this happen? thanks! Reply | Quote

ed  - non-black background image 2009-07-11 03:59:36 Just put a background image in the .slideshow div ;) Also, I went 10-across the top w/ mine, and it worked great. I also nixed the main image border, and backed the thumb border down to 1px (since the thumbs are a lot smaller). However, I'm having major issues w/ the thumbs lining up in different browsers. If I get them flush in Safari, the 10th one overflows onto the main image in Firefox, Camino, Opera and IE7 (to different degrees), and when I fix one, the others are all screwy (of course). I tried using 0 margins on the thumbs but there's still spacing problems from browser-to-browser, which I *think* come from each browser handling the "font-size:1px"?? ALSO, i nixed the child selectors and just used descendants and it worked in IE6 ;) Anyway, great technique! It's been very helpful as an elegant common-denominator browser. Reply | Quote

ed  - oops 2009-07-18 15:54:24 My bad. Changing the CHILD selectors to DESCENDANT selectors only made it VISIBLE in IE6... which is better than nothing, lol. However, it still worked the same in all the other browsers. Reply | Quote

dev 2009-07-15 04:01:17 thanx dude Reply | Quote

picoy 2009-07-16 10:07:35 Hello, Your work is nice and neat, even though it's not automatic it is still a good option to present photos in websites. Thanks for sharing your work. Reply | Quote

John  - iPhone 2009-10-21 22:55:32 Very nice work, thank you for sharing. Is there a trick to making the slideshow take up more of the screen on the iPhone? I get the effect to work but it only fills about 1/3 of the screen. Thank you. Reply | Quote

Write comment

Name: Email:  do not notifynotify Website: Title: UBBCode:         -color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge   Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."