Mobile Friendly Website


Doing it with style

Simplest photo gallery 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

In my demo some of the images are not big enough to cover the default image (the 6th image for instance).
The gallery caters for this by using the <b> element to have a size big enough to cover the default image and uses the white background for this.
(29.05.2010, 15:11)

Oops-I forgot I changed that element to transparent till I took another look at the demo....
Thanks for the super quick response!
(29.05.2010, 16:37)

I really love this your css picture gallery. The new on is most awesome. But for some reason I can not set a default image width. I'm using pics from a db and I have no idea how large they are. So I need to set a default image width. I tried adding a width attribute to the img element and that did not work for some strange reason. Thanks in advance for your help. jtracey at dbidirect dot com
(28.10.2011, 08:08)

never mind - of course you put it in the css. what a wonderful piece of work this is. thanks again! keep me posted on all your future work.
(28.10.2011, 08:23)

I appreciate the ideas on this gallery and on many of the others, but I have to warn people new to HTML and CSS that the code in these demos is simply horrific.

There are entire blocks of CSS in this particular demo that are redundant or do nothing.

The tags <b> and <i> are blatantly misused. <span> seems to be totally misunderstood. The floats are wrong (you'll notice that the demo isn't actually "in" the #info div at all, it just happen to be forcibly lined up so that it appears to be inside of the #info div's boundaries).

Seriously, this is not code you want to emulate, and I think the author might want to work on this before posting it to his site. They look nice under certain conditions, but it's only on the surface. Be very careful if you're going to try to use this stuff.
(03.04.2013, 11:24)

I think that you will find that the code IS in the #info div and whilst I do not claim that this is semantically correct, it does show what is possible using just html and css.
This is the purpose of CSS play, as stated on the home page:
"Because CSS play deals with experimental CSS that is exactly what you get JUST CSS"
Also this demo was produced 6 years ago and as such had to use styles that were available at that time.
If I were to revise this using css3 styles that are now available I could do away with the need for <span>, <b> and <i> tags.
(03.04.2013, 12:37)

I used your code to enlarge pictures on my website by hovering on them.
the issue is that it does not work on google chrome. have you noticed this before? do you have a solution for this?
(23.04.2014, 15:39)

This demo works on all browsers including Chrome.
(23.04.2014, 16:37)

OK, I give up... what are the empty <span></span>'s for?
(27.01.2015, 19:35)

These are for IE6 and IE7.
If you look at the separate stylesheet for IE6 and IE7 you will see that they are styled #gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;}
This then gets the image file which is also display:inline-block; vertical-align:middle; to be vertically centered.
All other browsers use display:table-cell; vertical-align:middle;
(27.01.2015, 19:56)

10 of 47 comments (part 1). [ » ] [ * ]


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