CSS Image Information Panels

25th March 2011

For IE7, IE8, IE9, Firefox, Safari, Chrome, Opera, iPad, iPhone and iPod Touch

CSS play - Information Panels

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nisl ligula, at mattis tellus. Mauris tempor molestie felis vitae blandit. Mauris varius porta vulputate. Nunc lectus ipsum, ultricies et dapibus nec, lacinia at enim. Nam blandit aliquet sem a consectetur. Duis mollis laoreet pellentesque. Nunc lacinia, ipsum ut adipiscing ultrices, sapien enim lacinia arcu, consectetur laoreet lectus ipsum sit amet justo. Curabitur ante metus, accumsan vel pretium quis, consequat a sapien. Proin lacus tortor, sollicitudin vitae malesuada eu, ultricies non quam. Mauris sit amet sapien enim, tincidunt blandit erat. Fusce congue, justo id faucibus pretium, arcu quam ornare sapien, sed dignissim ipsum dolor eu eros. Nulla rhoncus nibh at urna dictum ac sollicitudin ipsum condimentum. Sed vel tempus tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat.

copyright © stu nicholls - CSS play


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.


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page