title: Simplest way for an image to pop up, like an image gallery portfolio, lightbox
body: <p>I'm just looking for the simplest way for my image to pop up / zoom in etc. (if that's the correct term), but pop up and take the space of the existing screen or device, like a lightbox. Basically I'm just creating a very simple image gallery. And on click, image will pop up.</p>
  
  <p>I've seen a couple of tutorials and templates but I'm not really a super coder and I'm trying my best to create this on my own. Any help would be greatly appreciated. I'm open to using pure css or include jquery too. If anyone can point me in the right direction it would be great.</p>
  
  <p>My code is here (I can't seem to paste the css, sorry):</p>
  
  <p><a href="http://codepen.io/anthonydda/pen/NGVoZN" rel="nofollow">http://codepen.io/anthonydda/pen/NGVoZN</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
           &lt;ul class="picture"&gt;
               &lt;li&gt;&lt;img src="http://lorempixel.com/200/200/"&gt;&lt;li&gt;
               &lt;li&gt;&lt;img src="http://lorempixel.com/200/200/"&gt;&lt;li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  .container {
    height: 600px;
    width: 600px;
    background-color: lightgray;
    margin: 0 auto;
  }
  
  .picture {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  li {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    cursor: pointer;
  }
  </code></pre>
  
  <p>Thank you</p>