title: Pop Up HTML Image when clicked
body: <p>Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below. </p>
  
  <pre><code>&lt;section id="main"&gt;
            &lt;div class="inner"&gt;
              &lt;section&gt;
  
  &lt;div class="box alt"&gt;
        &lt;div class="row 50% uniform"&gt;
  
                                &lt;div class="4u"&gt;&lt;span class="image fit"&gt;&lt;img 
  src="images/marble/1.jpg" width="321" height="230" alt="" /&gt;&lt;h3&gt;Marble&lt;/h3&gt;
  &lt;/span&gt;&lt;/div&gt;
  
                                  &lt;div class="4u"&gt;&lt;span class="image fit"&gt;&lt;img 
  src="images/marble/2.jpg" width="321" height="230" alt="" /&gt;&lt;h3&gt;Marble&lt;/h3&gt;
  &lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="4u"&gt;&lt;span class="image fit"&gt;&lt;img 
  src="images/marble/3.jpg" width="321" height="230" alt="" /&gt;&lt;h3&gt;Marble&lt;/h3&gt;
  &lt;/span&gt;&lt;/div&gt;
  
      &lt;/div&gt;
                &lt;/div&gt;
  &lt;/section&gt;
  
              &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>Hover:</p>
  
  <pre><code>.image.fit &gt;img:hover {
              width: 1000px;
              height: 1000px;
              position: absolute;
          }
  </code></pre>