title: Simple lightbox for my flex gallery
body: <p>I have made a flex gallery with a bunch of photos in it, what I want to do is make a simple lightbox (I thibk thats the term) where when an image is clicked it will be displayed bigger. No need for next or prev buttons.</p>
  
  <p>I would like to do this with jquery but bear in mind my js skills are that from a complete newbie , thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.photogallery__maincontainer{  width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;}
  
  .photogallery__viewer{ width:55%; height:100%; position:relative; display:flex; }
  
  .photogallery__viewer__image{max-width:80%; height:auto; margin:auto; overflow:hidden;}
  
  .photogallery{
   
   width:42%; 
   height:93%; 
   position:relative; 
   display:flex; 
   flex-wrap:wrap; 
   justify-content:flex-start; 
   align-content:flex-start; 
   overflow:auto;
   
  }
  
  
  .photogallery__image{
   background-image: url('images/20170819_194526.jpg'); 
   background-position: center;  
   background-repeat: no-repeat; 
   background-size:contain; 
   max-height:20%;  
   min-height:20%; 
   flex:0 0 calc(25% - 15px);  
   margin-right:15px; 
   margin-bottom:35px; 
   cursor:pointer;
  }
  
  .photogallery__image:hover{
   opacity:0.8;
  }
  
  .close{width:3%; cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center; display:table;  font-size:25px; font-weight:600; }
  
  .close:hover{color:rgba(255, 255, 255, 0.5);}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="photogallery__maincontainer" style=""&gt;
    &lt;span style="display:none; cursor:pointer; color:rgba(255, 255, 255, 0.5); font-family: 'Nunito', sans-serif; font-size:50px; font-weight:600; position:absolute; bottom:5px; right:320px;"&gt;&amp;#129087;&lt;/span&gt;
    
      &lt;div class="photogallery__viewer" style=""&gt;
     &lt;img class="photogallery__viewer__image" src="images/IMG-20170610-WA0025.jpg" style=""&gt;
   &lt;/div&gt;
   &lt;div class="photogallery" style=""&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0025.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170819_194526.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0040.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170902-WA0031.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170516-WA0023.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0017.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170812_181516.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170822_011703.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170815_203103.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170516-WA0011.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0030.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0047.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0038.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170829-WA0017.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0019.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170430-WA0022.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG-20170527-WA0002.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/IMG_20170823_222106_761.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170811_182103.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170522_124602.jpg');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/20170522_112958.jpg');"&gt;&lt;/div&gt;
        &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
     &lt;div id="last" class="photogallery__image" style="background-image: url('images/');"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;span class="close" style=""&gt;X&lt;/span&gt;
    
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>