CSS Frames Demo 2

28th February 2006 · Last updated: 5th October 2016


Inspired by a layout someone recently asked me to help them with, I realised I could rework my original CSS Frames Demo to do away with the JavaScript and use pure CSS. I reworked the idea from scratch until it worked how I wanted it to. Now, to get the frames to appear, all you have to do is change the visibility of a block that contains all the content you want. In this case, I've used display:none and display:block to toggle the visibility. The neat trick is that the block sits inside a list that has a link you hover over to show the block. (Hence you can use :hover to trigger the effect.) However, the block is positioned absolutely, so it can appear anywhere you want on the page. Thus the relationship between the link and the frame is hidden! This must be how those drop-down menus work.

Oh, one last thing. It don't work in IE. In theory it can be made to, but when I tried, I kept crashing the browser. It appears to have a serious :hover bug on links. I had to make a whole new demo about that!

The Demo

CSS Frames Demo 2

Related Links

CSS Frames Demo | IE Hover Crash Demo

Comments (4)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Dylan:
    I opened the demo in IE, and at first everything seemed alright. The hover effect didn't work but there was no crash, I then clicked on one of the pictures, the browser then crashed, but closed without any trouble. Then, I opened the demo again, and this time all hell broke loose. The thumbnails were there with the fullsized images below them, and the browser crashed without me even doing anything. I experienced the exact symptoms you describe in the bug report you've made. The process started eating memory, the pagefile jumped to over 1.3GB, and there were two IE processes open with different icons. Yikes, what a bug...

    Posted on 1 March 2006 at 12:25 am
  2. Tommy:
    OH MY GOD! What did you do to my computer!

    Sorry, but those were the first words that came to mind when I ran this demo. I keep my computer up to date with the latest updates whether it be hardware or software, but somewhere in that code..well..my computer freaked and froze and took me about 5min just to bring up the task mananger so i could end the process for IE.

    Posted on 8 March 2006 at 5:19 am
  3. Chris Hester:
    I didn't realise this demo was also affected by the IE Crash bug I detailed in my related post. I've put in a warning for IE users not to view it. Sorry about this. If anyone knows of a way to make the demo safe to view in IE, let me know.

    Posted on 8 March 2006 at 10:11 pm
  4. Vlakpage:
    In IE7b2 hover is working good, but after click the bigger image displays under the thumbnail and hover doesn't work. Remaining thumbnailns can be hovered without any problems.

    Posted on 18 May 2006 at 10:06 am