Mobile Friendly Website


Doing it with style

CSS DEMOSCSS playBOX - The Ultimate CSS Lightbox

Date : 31st May 2010

For all modern browsers

Using images

Using text links

Using inline links

This article is about the castle in Windsor and is taken from Wikipedia, the free encyclopedia.


I have been a little unhappy with the CSS 'lightbox' examples that can be found on the web, including those so far published on CSS play. The main problem is ease of use and having a satisfactory method of closing an open 'lightbox'.

So I have been trying to produce yet another 'lightbox' that addresses these problems and have come up with this ultimate version - 'CSS playBOX'.

This version works in all non-IE browsers using just CSS without the need for javascript, and, with just a small playbox.js javascript routine, will work in all versions of IE. Hopefully IE9 will include support for the :target pseudo-class and will allow this to work in future versions of IE without resorting to javascript.

The working of this is so simple and allows you to use any method of linking to the pop-up panel, including, images, lists and inline links. The pop-up panel can be styled in any way you like using the stylesheet and you also have the option of having the pop-up panel with a fixed position so that the page scrolls under it or absolute positioned so that it scroll with the page.

The example above uses photgraphs that I recently took at Windsor Castle and Gloucester Cathedral and shows linking using thumbnail images and an unordered list of links. I have also included an inline link which will pop-up an information panel which can also contain links to other pages.

So clicking any of these links will show the 'playBOX' in the ususal lighbox fashion with a closing 'X' positioned at the bottom right corner of the panel. Again this can be styled anyway you like using the stylesheet.

All it takes is for the links to have a classname 'playbox' and the href as a 4 character code (in my examples I have used href="#p001" etc.). The pop-up information is then placed at the bottom of your page with the <body> element as the parent and having the classname 'lightbox' and the same id as the href code. For example <div class="lightbox" id="p001">.

1st June 2010 - See the next demo for an enhanced version playBOX v2.

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