How to Create an HTML Lightbox

By Robert Godard

Lightboxes can be useful when creating your online portfolio.
i 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 center 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.

Open a text editor such as Notepad or TextEdit. Enter in the CSS code in the header part of your page. First type ""

Type "

Testing...Texting
" 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.

Add a "Close" button your lightbox by typing "Close" within the content of your Lightbox.

Create a link to the Lightbox by typing "Click Here" Replace "Click Here" with the text you want for your link.

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

×