How to make an Image overlay the site on click?

Question

Newby question here: How would you do to make it so that when you click on an image, it expands (not whole site) and centers on the site, and has a transparent background that lets you see the page you were on? (And then go back to the "background" page when clicking on the black transparent area) Kind of what happens in facebook when you click on an image in an album.

I tried doing it with CSS since I couldn't manage to make it with JS, with this:

    figcaption {
    font-size: 12px;
    text-align: center;
    display: block;
    background-color: white;
    font-weight: 500;
    }
    figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    }

    figure:focus {
    outline: none;
    -webkit-transform: scale(5); -moz-transform: scale(5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
    }

But still this is not what I'm trying to do.

fiddle: http://jsfiddle.net/seanh99/ubJLU/

This is the first website I'm trying to build, so any tips/corrections are appreciated!

Answer 1

It seems like you're attempting to create a "lightbox" for images. The best option for you might be to use an existing jQuery plugin for this.

Two examples are:

1. (http://fancyapps.com/fancybox/)
2. (http://lokeshdhakar.com/projects/lightbox2/)

You will need to include jQuery in your code for these to work.

Answer 2

A tool I have used is Lightbox 2. It can be found here (This is, if you don't mind using an outside resource).