title: Images within modal box
body: <p>I am looking to put images within a modal box. 
  I can load the modal box with an image in it but every time i press next image, the modal box disappears. I am at my wits end with this. </p>
  
  <p>I do not want to use any form of JavaScript. I want to stick to pure HTML and CSS. </p>
  
  <p>What am i doing wrong</p>
  
  <p>My code is here
  <a href="http://codepen.io/kinivrus/pen/XmJvRJ?editors=110" rel="nofollow">http://codepen.io/kinivrus/pen/XmJvRJ?editors=110</a></p>
  
  <p>regards
  David</p>
  
  <pre><code>&lt;a href="#portfolio"&gt;&lt;img src="portfolio.gif" width="591" height="591"         alt="Portfolio" /&gt;&lt;/a&gt;
  &lt;div id="portfolio" class="portfolioModal"&gt;
    &lt;div&gt;
  &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
  
  &lt;h2&gt;Portfolio&lt;/h2&gt;
  
  &lt;div class="slider"&gt;
    &lt;ul class="frames"&gt;
      &lt;li id="one" class="slide"&gt;
        &lt;img src="8k3N3EL (1).jpg" width="640" height="320" alt="slide 1" /&gt;
        &lt;nav&gt;
          &lt;a class="prev" href="#five"&gt;&amp;larr;&lt;/a&gt;
          &lt;a class="next" href="#two"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/li&gt;
  
      &lt;li id="two" class="slide"&gt;
        &lt;img src="blue-bar-1255161.jpg" width="640" height="320" alt="slide 2" /&gt;
        &lt;nav&gt;
          &lt;a class="prev" href="#one"&gt;&amp;larr;&lt;/a&gt;
          &lt;a class="next" href="#three"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/li&gt;
  
      &lt;li id="three" class="slide"&gt;
        &lt;img src="download (1).jpg" width="640" height="320" alt="" /&gt;
        &lt;nav&gt;
          &lt;a class="prev" href="#two"&gt;&amp;larr;&lt;/a&gt;
          &lt;a class="next" href="#four"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/li&gt;
      &lt;li id="four" class="slide"&gt;
        &lt;img src="download.jpg" width="640" height="320" alt="" /&gt;
        &lt;nav&gt;
          &lt;a class="prev" href="#three"&gt;&amp;larr;&lt;/a&gt;
          &lt;a class="next" href="#five"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/li&gt;
  
      &lt;li id="five" class="slide"&gt;
        &lt;img src="startup-594091.jpg" width="640" height="320" alt="" /&gt;
        &lt;nav&gt;
          &lt;a class="prev" href="#four"&gt;&amp;larr;&lt;/a&gt;
          &lt;a class="next" href="#one"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  
     &lt;/div&gt;
  </code></pre>