Taking the use of :before/:after and content: one step further, this gallery code has no images.
If you examine the code you will just see 100 empty links followed by an empty nested divs code. So no large images and no thumbnails.
As the 100 large images are not being loaded with the page, load times are greatly reduced. The large images are only loaded when you click the thumbnail images.
Firefox 4, Opera, Safari and Chrome have a fade in of the large image.
So click a thumbnail to fade in the large image, and mask the thumbnail images, then click the large image to return to the thumbnails.
You can also 'tab' forwards and backwards through the images by pressing the 'Tab' key (forwards) and 'Shift+Tab' keys (backwards).
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.