opening image on top of a browser window

Posted on 2007-10-08
Last Modified: 2012-05-05 -> Click on the third image on the vertical menu, "Concept".

It opens up an image, and turns everything else in the background to be darkened.

anyone know how I can create that effect?
Question by:keewong
    LVL 38

    Expert Comment


    Sure, it's not too hard, using CSS and Javascript. On a click on the menu item, you put a dark layer up which covers the entire screen, but set to 75% opacity. Centered in that layer is the photo - not as a background image, though, or it would have transparency as well. Also using javascript, if you click anywhere on the dark layer, you hide that layer again.


    Author Comment

    thanks LHerrou,

    I'm not very much a programmer, anyway to set up the css file, and html file and post it?
    LVL 19

    Accepted Solution

    Hi keewong,

    The method is called "lightbox", and can be seen here:

    There are instructions on that page.

    Here are some additional choices:

    Author Comment

    thats beautiful! thanks Daydreams!
    LVL 19

    Expert Comment

    You're welcome keewong and good luck with your project! :-)

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
    Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now