Doing it with style
This is a caption that can contain links
The caption can be spread over two lines
or more if you need the extra
space for the text
GALLERY ONE - CAPTION FOUR
GALLERY ONE - CAPTION FIVE
GALLERY ONE - CAPTION SIX
GALLERY ONE - CAPTION SEVEN
GALLERY ONE - CAPTION EIGHT
GALLERY ONE - CAPTION NINE
GALLERY ONE - CAPTION TEN
GALLERY ONE - CAPTION ELEVEN
GALLERY ONE - CAPTION TWELVE
GALLERY ONE - CAPTION THIRTEEN
GALLERY ONE - CAPTION FOURTEEN
GALLERY ONE - CAPTION FIFTEEN
GALLERY ONE - CAPTION SIXTEEN
This is a caption that can contain links
The caption can be spread over two lines
or more if you need the extra
space for the text
GALLERY TWO - CAPTION FOUR
GALLERY TWO - CAPTION FIVE
GALLERY TWO - CAPTION SIX
GALLERY TWO - CAPTION SEVEN
GALLERY TWO - CAPTION EIGHT
GALLERY TWO - CAPTION NINE
GALLERY TWO - CAPTION TEN
GALLERY TWO - CAPTION ELEVEN
GALLERY TWO - CAPTION TWELVE
GALLERY TWO - CAPTION THIRTEEN
GALLERY TWO - CAPTION FOURTEEN
GALLERY TWO - CAPTION FIFTEEN
GALLERY TWO - CAPTION SIXTEEN
This is a caption that can contain links
The caption can be spread over two lines
or more if you need the extra
space for the text
GALLERY THREE - CAPTION FOUR
GALLERY THREE - CAPTION FIVE
GALLERY THREE - CAPTION SIX
GALLERY THREE - CAPTION SEVEN
GALLERY THREE - CAPTION EIGHT
GALLERY THREE - CAPTION NINE
GALLERY THREE - CAPTION TEN
GALLERY THREE - CAPTION ELEVEN
GALLERY THREE - CAPTION TWELVE
GALLERY THREE - CAPTION THIRTEEN
GALLERY THREE - CAPTION FOURTEEN
GALLERY THREE - CAPTION FIFTEEN
GALLERY THREE - CAPTION SIXTEEN
Using the latest techniques to produce a simple gallery with permanent image changes, a toggle zoom action and captions for each image.
The html code is now very easy to follow and just uses checkbox inputs and labels to zoom toggle the images and a paragraph element for each caption.
So click any thumbnail to see it zoom to full size and the caption slide up from the bottom of the gallery. Click the large image to see it shrink back to its original thumbnail size.
There are three galleries in this slideshow but there is no limit to the number possible.
I have used landscape 640px x 480px and portrait 480px x 640px for this demonstration but the images can be any size you want as they are held as background images which are styled with 'background-size:contain;' so that they will be scaled to fit and centered within the 640px x 640px container.
IE9 will see an instant change of image size but all other browsers wil see the animation.
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.