Mobile Friendly Website


Doing it with style

CSS DEMOSCSS Image Information Panels

Date : 25th March 2011

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

CSS PLAY - Information Panels

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.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at} and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


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