Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life
Now that we have answers to the Safari problem of having the :focus state persist and the use of :active/:focus with the general sibling selector, we can use mouse clicks to show/hide elements.
In this demo it is used to show/hide larger images, which can then be hovered to show an information panel and clicked to close.
For IE7, IE8 and IE9 I have used a single line htc behavior to cure a bug where the :active state is not styled until the mouse is moved off the :active element. All this does is refresh the display for the gallery.
Unfortunately IE6 does not support the styles required for this.
So click any of the three thumnbnail images to show the large image and then hover the large image to show the information panel. Click another thumbnail to close the current large image and open the new image or click the large image to close it.
The information panel text can contain links to other pages and the space between the thumbnail images and the large image is not 'covered' by any invisible element so links in the text beneath can still be clicked.
Safari, Chrome, Opera and Firefox will have the large image slide down into view and the information panel slide up over the image.
13th February 2013
Now working in IE10 and IE10 with touch screen.
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.