title: On click open image in center of screen
body: <p>So i tried to make my gallery more better. I want when user click on element to open image in the middle of the screen. I'm sure that there is efficient way to do this with adding class or something.
  What should i do ? </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;ul class="gallery"&gt;
          &lt;li&gt;
              &lt;img  src="img/1.png" /&gt;
              &lt;div class="caption" onclick="view('1.png')"&gt;
                  &lt;div class="blur"&gt;&lt;/div&gt;
                  &lt;div class="caption-text"&gt;
                      &lt;h1&gt;+&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img  src="img/2.png" onClick="view('2.png');"&gt;
              &lt;div class="caption"&gt;
                  &lt;div class="blur"&gt;&lt;/div&gt;
                  &lt;div class="caption-text"&gt;
                      &lt;h1&gt;+&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;ul&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     function view(imgsrc) {
        viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
     }
  &lt;/script&gt;
  </code></pre>