Grow your CSS skills. Land your dream job.

Design Trick

  • # April 25, 2008 at 10:41 am

    I was out on the web the other day searching around for some inspiration for a new website I am doing. I ran across a site http://www.webdesignerwall.com/trends/33-artistic-sites/ that uses a feature I have seen in some other sites, but am not sure how to do it. When you click on on of the thumbnails it grays out the background and then enlarges the thumbnail. I would like to do something like this for a recent work or portfolio section. It looks like this particular site accomplished this without using Flash, so I’m assuming it’s a combination of some JavaScript and CSS.

    Has anybody ever done this or have suggestions as to how this could be done? Thanks!

    # April 25, 2008 at 10:49 am

    That effect is generally referred to as a "lightbox" and you are right, it’s all javascript and CSS. There is a great round up of all the different modules for doing this here:

    http://planetozh.com/projects/lightbox-clones/

    # May 4, 2008 at 1:18 am

    Use backbox.

    lightbox drives me crazy bc you cant click on the blacked out area around it to exit the picture.

    backbox you can.

    much better and its faster too.

    # May 5, 2008 at 7:44 am

    I more prefer Fancyzoom since everybody is using lightboxes on their website, this is something a little different. Pitty that it’s only free for personal use…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".