Mobile Friendly Website


Doing it with style

css slide show COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

this is wonderful, exactly what I was looking for. But I am a complete newbie at CSS programming: how can I make it display 5 or 6 images wide? I managed to increase the width of the gallery. Thank you.
(13.04.2006, 00:45)

Serge, you will need a good knowledge of css to change this as you want.
If you increase the gallery to 5 or 6 wide then the slides will show each side when displaying a large portrait image.
I made this one as simple as possible and a 4x4 (or less) is probably the best way to go. After all, if you have more images then you could add more 'Sets' but bear in mind that the more images you have, the longer loading times.
(13.04.2006, 08:07)

Netscape 8 users need to click on the slide mount rather than the image to see the full size image.
Then click again to close it.
(13.04.2006, 08:23)

Stu, I don't necessarily want to add more slides, just display them differently, on 5x3 grid for example. Also, I have a problem displaying the images: I saved the source code of your page, which works perfectly, but on my computer, it only displays the first horizontal and the first vertical rows. The others are blank. I use Firefox 1.5.
(13.04.2006, 15:53)

I'm impressed, it took me a moment to work out how you got this working, now that I know it almost seems too simple.
(20.04.2006, 03:45)

I love the slideshow, great job! I have a question though, what would I have to do to make the first tab visible as default ?
(20.04.2006, 19:24)

Hello again Stu, I've tried this one instead.. any idea why it would be doing this to the thumbnails?

Cheers mister.
(22.04.2006, 12:48)

Yeah, erm, ignore that :).
(22.04.2006, 12:57)

the slide show is simply amazing.....super work mate
(26.04.2006, 21:15)

this is a great homepage.
thank's so much for sharing these tips.
(28.04.2006, 23:39)

Great Slide Show!
Actually i´m trying to get a description of the big photo displayed but all effort failed so far.
As far as my understanding goes i have to modify the section with large image styling, so i hoped if i make the box little bigger e.g. instead of height 640 to 660 i can use this space to display the title.
At which point am i wrong? Defining the text format and to be displayed at the bottom center doesnt give me the thing i want:
.menu2 ul li:hover ul li a.vert:active em, .menu2 ul li:hover ul li a.vert:focus em {
display: block;
background: #ddd;
position: absolute;
left: 115px;
top: 23px;
width: 480px;
height: 660px;
z-index: 500;
cursor: default;
border: 1px solid #fff;
font: Georgia, serif;
font-size: 0.5em;
text-align: center;
Hope you have any ideas?
(01.05.2006, 18:55)

A.Rudolf, the style you have shown is for non-IE browsers using li:hover.
The top:23px looks to be wrong, as you want the text at the bottom try bottom:5px;
Assuming you want the text central then left:115px; width:480px; will give a 'total' width of 2x115 + 480 = 710px.
But other than that you are on the right lines.
(01.05.2006, 19:22)

A. Rudolf:-
think i spelled bad what i was asking for. the style i was working with was the non ie and from that was the example.
The thing im asking is. Where is the title of the image displayed? i thought inside of the grey placeholder, therefore i advanced it to 660px instead of 640 px for the vertical image to get place for the text. but i dont get text displayed at all?!
(01.05.2006, 20:09)

A.Rudolf, I think we are talking at cross purposes. Do you want to ADD a tile to the image or do you want to use the 'title' tag?
If you want to add a title then you will need to, perhaps, <b>This is the title</b> in the large image <em>...</em>.
You can then style this <b> tag to be display:block; position:absolute; etc.
(01.05.2006, 20:41)

A. Rudolf:-
Ok now we got it! I want to use the title tag :)
</span><em><img src="test.jpg" alt="" title="<b></b>" /></em></a>

would that the right syntax i guess?
and the style something like :
.b { position: absolute ect}

If so i think i have to thank you. You safed my sunday. *big* Thanks
(01.05.2006, 20:48)

Ok, firstly the title tag cannot be used in this way. You will need to add the title for display in this way:
<em><img src="test.jpg" alt="" title="" /><b>This is the Title</b></em>
(01.05.2006, 20:59)

A. Rudolf:-
Great that worked for me. Thx for the fast help.
I really like the ideas you make real with CSS. I studied before Dave Sheas site but it was always the same structure (as intended i know). But here u show something really different. Keep on going!
(01.05.2006, 21:26)

Hi Stu:

I look forward to using this fantastic gallery soon.
I was wondering if there was a way for Safari users to not get that "moving ghost" of an image if they move their mouse, or can the mouse position be automatically pegged to the bottom right, or otherwise moved out of the way without disturbing the image? It is a shame to have such a great gallery and then to see a big arrow in the middle of the photos.
(05.05.2006, 22:56)

Hello again:

I also noticed in Safari that a blue highlight appeared over the image if I dragged the photo with the mouse at all. I think that by adjusting the mouse postion, this would happen less, but I wonder if it can be totally avoided?

Thanks for any advice!
(05.05.2006, 23:02)

Andrew, this is an unfortunate problem with Safari and Opera. These browsers will not retain the :active/:focus state once the mouse button is released.
I do not know of any way to position the mouse with CSS. It may be possible to add a javascript routine, but that would defeat the object of this site.
(05.05.2006, 23:04)

This is a very nice job.
But I have a small problem:
Actually I use the MK3 one, and I just wanted to close LARGE images with a clic on it instead of the "clic to close large image" button.

How to do that ?
(11.05.2006, 17:41)

djedie, easy....just get Firefox. This is the normal way for this browser. Click to open and click again (even on the large image) to close.
Unfortunately it is not possible with any other browser. But you don't have to click on a button (that's just for show) just click anywhere off the large image.
(11.05.2006, 17:57)

I have Firefox, and with the MK3 galerie, we can't close the big image. However it is possible with the "silde show" one.
But I would like to do this with the MK3 one
(11.05.2006, 22:10)

djedie, sorry I thought that you were referring to the slide show for which these are the comments. The slide show can be closed by a click on the large image but the others require a click anywhere off the large image.
(11.05.2006, 22:24)

How to close them by a click ON the image (kije with the slide show).
What do I have to modify in the XHTML or CSS file?

Finally, I did it, it works, but the 2X images (small zoom) appears behind the small ones.
However, a simple clic on the large image close it.
Can you help me ?
(11.05.2006, 22:46)

djedie, that's the problem. You cannot have the small zoom AND the large image ckick to close. That is why it works on the 'slide show' but not on the galleries.
I do not know of any way round this.
(11.05.2006, 23:00)

ok, thanks a lot.
And congratulation for your website!
(11.05.2006, 23:05)

Thanks a lot for this great gallery css - it's always a pleasure to check the stuff on your site.

I use this gallery on my own page and noticed a strange effect in IE. If I don't include the lines
a, a:visited {
color: #e0e1d9;

a:hover {
which are (other colour) also in cssplay.css, IE stops opening the large image after a few clicks on the thumbnails. Only when you click on a thumbnail and move the mouse to the background, the large image appears.
I don't know if there is some interference with my own css file. If I copy your whole gallery page on my site and remove these entries from the css, the same thing happens. Any idea?

Keep on playing!
(13.05.2006, 12:12)

Lars, this is a necessary 'feature' of IE in that it NEEDS the default states of links to be defined in order to work correctly.
I found this out a few months ago (by accident) when working on a demonstration that used both hover and active.
There is no way round this but it is not normally a problem to define the defaults in this way.
(13.05.2006, 12:22)

Thank you for the very quick reply.

Do I need to define _all_ states? I don't describe the active state so far, and I don't find it in your css files.
(13.05.2006, 12:28)

Lars, it is always safer to set the default style of all states. Mine is set in the cssplay.css file
(13.05.2006, 13:00)

good work, I like it.
(10.06.2006, 05:20)

Ted Bullock:-
The html validator extension for firefox (tidy) complains about the empty <span class="clr"></span>.

Would not a better solution (and certainly more intuitive) be to have <br class="clr" />?

Just my $0.02
(19.06.2006, 23:19)

hi there,
im having trouble with this and others.
im not sure where everything goes together within html and css, because you have to put cartain elements here and there im confused with creating my own, i need help...
my email is
(04.07.2006, 07:45)

Chris Ash:-
Hi Stu,
Been a fan of your site for a while and have had the Privilege of seeing it grow whilst seeing new themes.
As an idea for a future project, i think a css driven web calander would be awesome!
i have been studying how you created the 'CROSS BROWSER CSS SLIDE SHOW' and am trying to come up with my own calander using the same principals.
i have found a good javascript based one, but it lacks style
(12.07.2006, 04:02)

Chris, your calendar link was a parked site. I already have three CSS calendars on this site.
(12.07.2006, 08:03)

chris ash:-
its probally a parked site as you don't allow http: in posts here; the link should be:
http: //

i never knew about the calendars here. ill have a look.
(13.07.2006, 01:10)

Leo Rose:-
This is a great image gallery. Do you know of a simple way to add additional links from the large photo page. EG. Click *here* for high res and click *here* for low res. I can add text but it obviously wont allow me to add <a> within another <a>.
(04.09.2006, 19:06)

Leo Rose, if you check the xhtml you will see that it is already using links within links (for IE) and it works. Just use the same principle for adding more links within the large image link and it should work (tables and conditional comments).
(06.09.2006, 23:19)

Nick Cassidy:-
Hi Stu,

I'm managing a small project at a multimedia company called Illumina. We need a simple elegant photo gallery for a small website showcasing multimedia work in a dozen or so schools and colleges.

While searching for inspiration, I came across CSS PLaY and am very impressed. I'd be happy to make a contribution to use this if you'd allow us to use the code for this purpose.

Many thanks,
(11.10.2006, 10:44)

Nick, just email me stu{at} with the information as to which website and it will be done.
(11.10.2006, 11:09)

Hi! Great stuff!

Just wondering is there a way to make one of the tabs default opened?

(01.11.2006, 18:53)

I have learned very with its teachings.
I would like e-mail you. Where are your adress e-mail?
I'm from Brasil, and my english are terible!
(15.12.2006, 15:32)

Claudia, contact information here
(15.12.2006, 15:54)

This is brilliant! Perfect for the page that I'm working on. Is there any simple way to make the first tab visible by default when the page loads so the visitor doesn't have to hover to see it, or a way to add in a 'default tab' that appears underneath the whole shebang?
(21.02.2007, 14:55)

It would be great when you click on the picture ... you have the possibility to put of course a pic, but html too ... the idea is to show the content of a blog ... possible ? :) (great stuff)
(24.02.2007, 02:42)

Hello Stu

I also am wondering if it is possible to have the "screen" dropped down full time, or to have one tab open by default. Iâm pretty determined and will more then likely use this code on my website, pending your approval of course
(20.04.2007, 21:35)

I am trying to figure out why the css make all vert images change the underlying 4x4 layout when one clicks to view the 480x640 in each of the menu headings. This change makes the row change form and peak itself so that it show a grid around the 480x640 image.

any help would be appreciated
(08.05.2007, 16:10)

Dear Stu,

I'm very much interested in implementing this gallery into my fraternity's website:

It is not exactly a personal site, but it is certainly not a commercial one, we are a non-profit student social organization at Florida State University. I plan on making the photo gallery one of the key components of the website, and your gallery would be absolutely perfect. That is with your blessing of course :)

(21.07.2007, 21:49)

Hi Stu,
I have used this gallery type for some time on my personal home page ( and I'm really happy with it.
Now for a special gallery I need this type with only one tab. The html is easy of course, but the hover effect on the tab is useless and I'd prefer the gallery to be visible all the time.
I thought that the easiest way would be to simply remove the :hovers from the tab-link, but this doesn't work. Worse, whatever I try, the grey border around the thumbnail always fits the thumbnail in width and has a height of only 31px (wherever that comes from).

Is there a straight way to reduce this gallery type to one tab (to keep the same style as the other galleries) and have it visible all the time?
(20.08.2007, 22:27)

Hello Stu,

First thanks you a lot to share your talent, and your knowledge, thank you very much, thanks of you, i can use css gallery without javascript!

Sorry for my english, it is scool english....
This message have a reason :

I've a probleme with this gallery. i use it on a friend's site here :

and other pages in "Illustrations" and "Recherche Design" (you have to click on image to go to the page)
the gallery is fully fonction on firefox and IE7 but on IE 6 it's tchernobyl.....
small images stay, even if the cursor is away, and it's a big bug if we want to change galery...

i'm on that since 5 days, and i can't resolve the probleme.... please help me T_T
you're my last solution !
(20.08.2007, 22:44)

Great code.

I've been trying to get the "Large" image to open up by using thickbox but have been unsuccessful. Any suggestions?
(29.08.2007, 21:33)

Got it working, just down to one problem which is keeping the submenu open after opening the thickbox.

Thanks for the great code.
(30.08.2007, 16:38)

Steve O:-
Hello Stu

This CSS only gallery is fantastic and even easy to alter for those of us who don't grasp the depths of code.

I wanted to use it for a friends site but am having problems with IE7 - this happens on your example too. Bsically, when you click on the thumbnail the large image that pops up does not disappear when clicked on. I can make it change by clicking on other, visible thumbnails, but even if I switch to another menu tab and switch back, the large image is still up. Is this not a common issue?

let me know if this can be solved as I will be happy to make a donation to use it.
(30.09.2007, 21:40)

Hey Stu
So I completely love the slide show that you have done. I am trying to implement it on my personal website but I am unable to get it to work properly, and frankly, I have no clue why it isn't working. If anybody besides Stu knows what might be the issue please let me know.

Jacob A Holder
(07.10.2007, 04:45)

Hey stu, great work!
I sit possible to turn the large image into a hyperlink ? I have tried this using hotspots in a png but it doesn't get recognised. Any thoughts ?

(09.11.2007, 13:34)

Hey stu, great work!
Is it possible to turn the large image into a hyperlink ? I have tried this using hotspots in a png but it doesn't get recognised. Any thoughts ?

(09.11.2007, 13:35)

is there a way to have the small image menus drop down when the page containing the slide show is loaded? rather than waiting for the user to mouse over the tabs?

i still want to be able to use the tabs to go between the lists. i just want the menus to be open displaying the small images.

(13.10.2008, 21:26)

Hello Stu. This photo gallery code is very good. I'm a graphic design student just starting to discover the css possibilities. I would really like to implement your code for one of my freelance projects. I'd be happy to donate some money to get the permission to use it.

(17.01.2009, 19:26)

Hi Str,

New to CSS but this slide show works a treat. Can't understand the function of <em> in the code around the full size picture. I thought it was for emphazised text.

I have no text so I removed it (& </em>)and now the full size image doesn't align properly. What is it's function? Why does it work with it in?
(01.04.2009, 03:17)

Excuse me for my english
I want to use "Cross browser CSS slide show" to put on the site of my wife but I'm not a specialist of CSS.
I am ready to pay, it's normal beacuse your work is wonderful.
where i can found a tutoriel who explains how i can proceed to make a web page with your CSS code?
thank you for your help
(09.01.2010, 08:52)

I am an artist who is re working a website I designed in Go Live CS.
This gallery is exactly what she wants ( yet she wants the image to stay open until the user closes it. I am doing this site in exchange for lessons yet I will pay the fee. I now have Dreamweaver CS4 and wish to add this gallery to the new site.
(17.04.2011, 01:16)

Jesus Rodriguez:-
In google chrome I need to keep the click pressed to view the full size. Do you know how to solve this issue and make it work normally?
(28.06.2012, 22:08)

This gallery is six years old and has not been brought up to date with the latest techniques.
To have the click stay active in Chrome and Safari just add tabindex="1"; to the link styling.
I have updated the demo to include this.
(28.06.2012, 22:33)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page