Mobile Friendly Website


Doing it with style

CSSplay Holiday 2013 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

Great pictures Stu and I am sure that you had a great time. Other than the flight to an from..:)

I've tested the Holiday Gallery 2013 with my pictures, adjusted to my needs, and everything seems to work just fine, but... The actual large image does not load, when clicked on the thumb image. The opacity slider does work, but it just reveals the background. The browsers were Firefox 19.0.2, IE10, and Opera 12.14.

The validation of the code fails with error:
<input type="radio" name="gallery" id="p1" checked="checked" />
The mentioned element is not allowed to appear in the context in which you've placed it;
(17.03.2013, 14:07)

The flight to New Zealand took 27 hours, but we broke the return into three steps, Brisbane, Singapore and Heathrow.
For this demo the validator does not give this code error.
For the large images check that the filename/path is correct.
(17.03.2013, 16:43)

The 27 hours on the plane must of been a drag; good thing that you stopped on the way back.

I should've mentioned that validation error was on my source code, sorry about that.

The images are defined similarly in the CSS and HTML:

#p1:checked ~ .holder:after {content:url("img/p1.jpg")}


<label for="p1" tabindex="1"><img src="img/p1t.jpg" alt="" /></label>

The HTML code has no problems finding the thumbnail images, but CSS could not find them in the same directory. Yes, they are there, but is there any specific size that the image needs to be?
(17.03.2013, 17:25)

Are you using a separate stylesheet?
If so then the path to the images needs to be from the stylesheet directory.
(17.03.2013, 17:53)

Yes, I am using a separate style-sheet, called from the directory of "css". Copying the images to this directory did not make the large image appear.

On the other hand, copying the CSS content into the HTML page, <style></style>, did make the pictures appear, even from the "img" directory.

I am not sure as to why this kind of behavior was experienced, but in either case, thanks for your help...
(17.03.2013, 19:09)

If your stylesheet is in a css directory off the directory containing the html file then the path to your large images will be

#p1:checked ~ .holder:after {content:url("../img/p1.jpg")}
(17.03.2013, 20:26)

One of your best! And brilliant photos too!

I'd like to use this for a new website for our camera club which will have dynamically generated galleries.
The images we'll have on the site will be of all sorts of proportions, so I'm going to have to try and understand how it all works so I can generate the stylesheet values that relate to specific sizes. If it's OK I may need to pick your brains on this one.
(16.08.2013, 08:08)

I've cracked it - a brilliant gallery! I'd love to be able to display a few details for each photo immediately below it - not sure how to do that with css.
(10.09.2013, 15:14)


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