Taking the 'cssplayBox' a step further to reduce the amount of code and transfer the 'content' of the lightbox to the stylesheet, I present the 'oneBox', so called because the large image and associated text are all entered into just one piece of code using the :before and :after pseudo classes and the content: style.
If you examine the code you will just see the thumbnail images followed by an empty 'oneBox' code. So no large images and no associated text. Click a thumbnail image to add the 'content' of that image into the 'oneBox' code and display the information in a normal lightbox. Click the cross in the top right of the lightbox image (or anywhere else) to close the lightbox.
Once the large image is displayed you can 'tab' forwards and backwards through the images by pressing the 'Tab' key (forwards) and 'Shift+Tab' keys (backwards).
Another benefit of this method is that the large images are not loaded with the page or as background images in the stylesheet so making for faster page loading times.
Firefox 4, Opera, Safari and Chrome have a fade in of the large image.
All the photographs used in this demo are my own.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
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.