How to Create an HTML Lightbox

Written by robert godard
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an HTML Lightbox
Lightboxes can be useful when creating your online portfolio. (Dynamic Graphics Group/Dynamic Graphics Group/Getty Images)

Lightbox is a Web design tool that creates a small box that displays content such as images or text in it that pops up in the centre of the screen when a link is clicked. There are many variations of creating a lightbox, and most of them require that some JavaScript be used. There is, however, a way to create a lightbox effect on your website using only HTML code.

Skill level:


  1. 1

    Open a text editor such as Notepad or TextEdit. Enter in the CSS code in the header part of your page. First type "<style type="text/css">" into your HTML page. Follow this with the code:


    display: none;

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    background-colour: black;


    -moz-opacity: 0.8;


    filter: alpha(opacity=80);


    .white_content {

    display: none;

    position: absolute;

    top: 25%;

    left: 25%;

    width: 50%;

    height: 50%;

    padding: 16px;

    border: 16px solid orange;

    background-colour: white;


    overflow: auto;


    End your header with "</style>"

  2. 2

    Type "<div id="light" class="white_content">Testing...Texting</div><div id="fade" class="black_overlay"></div>" in the body section of your website. This will define the content you want to appear in your Lightbox. Any html can be inserted here.

  3. 3

    Add a "Close" button your lightbox by typing "<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>" within the content of your Lightbox.

  4. 4

    Create a link to the Lightbox by typing "<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>" Replace "Click Here" with the text you want for your link.

  5. 5

    Save your file. You have now created a Lightbox with just HTML.

Tips and warnings

  • Integrate your lightbox into a section of your website. They are especially good for displaying images or videos.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.