tengo este código de una galería responsive que no hace nada, pero me gustaría que al clicar en cada imagen, esta se viese sola y grande sobre un fondo oscurecido tipo lightbox (creo que se llama así) y también responsive. 
mi galeria es esta [link online][1]

Aquí hay un ejemplo [https://mobirise.com/extensions/agencym4/sliders.html][2] 

Gracias anticipadamente


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: Arial;
        background-color: #2c2b2b;
        color: white;
    }

    .header {
        text-align: center;
        padding: 32px;
    }

    .row {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */
    .column {
        -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
    }

    .column img {
        margin-top: 8px;
        vertical-align: middle;
    }

    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
        .column {
            -ms-flex: 50%;
            flex: 50%;
            max-width: 50%;
        }
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            -ms-flex: 100%;
            flex: 100%;
            max-width: 100%;
        }
    }
    </style>
    <body>

    <!-- Header -->
    <div class="header">
      <h1>Trabajos realizados</h1>
      
    </div>

    <!-- Photo Grid -->
    <div class="row"> 
      <div class="column">
        <img src="images/0001book.jpg" style="width:100%">
        <img src="images/0002book.jpg" style="width:100%">
        <img src="images/0003book.jpg" style="width:100%">
        <img src="images/0004book.jpg" style="width:100%">
        <img src="images/0005book.jpg" style="width:100%">
        <img src="images/0006book.jpg" style="width:100%">
        <img src="images/0007book.jpg" style="width:100%">
        <img src="images/0008book.jpg" style="width:100%">
        <img src="images/0009book.jpg" style="width:100%">
        <img src="images/0010book.jpg" style="width:100%">
        <img src="images/0011book.jpg" style="width:100%">
        <img src="images/0012book.jpg" style="width:100%">
        <img src="images/0013book.jpg" style="width:100%">
        <img src="images/0014book.jpg" style="width:100%">
        <img src="images/0018fantasia.jpg" style="width:100%">
        
      </div>
      <div class="column">
        <img src="images/0001fantasia.jpg" style="width:100%">
        <img src="images/0002fantasia.jpg" style="width:100%">
        <img src="images/0003fantasia.jpg" style="width:100%">
        <img src="images/0004fantasia.jpg" style="width:100%">
        <img src="images/0005fantasia.jpg" style="width:100%">
        <img src="images/0006fantasia.jpg" style="width:100%">
        <img src="images/0007fantasia.jpg" style="width:100%">
        <img src="images/0008fantasia.jpg" style="width:100%">
        <img src="images/0009fantasia.jpg" style="width:100%">
        <img src="images/0010fantasia.jpg" style="width:100%">
        <img src="images/0011fantasia.jpg" style="width:100%">
        <img src="images/0012fantasia.jpg" style="width:100%">
        <img src="images/0013fantasia.jpg" style="width:100%">
        <img src="images/0014fantasia.jpg" style="width:100%">
        <img src="images/0019fantasia.jpg" style="width:100%">

      </div>  
      <div class="column">
        <img src="images/0001moda.jpg" style="width:100%">
        <img src="images/0002moda.jpg" style="width:100%">
        <img src="images/0003moda.jpg" style="width:100%">
        <img src="images/0004moda.jpg" style="width:100%">
        <img src="images/0005moda.jpg" style="width:100%">
        <img src="images/0006moda.jpg" style="width:100%">
        <img src="images/0007moda.jpg" style="width:100%">
        <img src="images/0008moda.jpg" style="width:100%">
        <img src="images/0009moda.jpg" style="width:100%">
        <img src="images/0015fantasia.jpg" style="width:100%">
        <img src="images/0016fantasia.jpg" style="width:100%">
        <img src="images/0017fantasia.jpg" style="width:100%">
        

      </div>
      <div class="column">
        <img src="images/0001loreal.jpg" style="width:100%">
        <img src="images/0002loreal.jpg" style="width:100%">
        <img src="images/0003loreal.jpg" style="width:100%">
        <img src="images/0015book.jpg" style="width:100%">
        <img src="images/0016book.jpg" style="width:100%">
        <img src="images/0017book.jpg" style="width:100%">
        <img src="images/0018book.jpg" style="width:100%">
        <img src="images/0019book.jpg" style="width:100%">
        <img src="images/0020book.jpg" style="width:100%">
        <img src="images/0021book.jpg" style="width:100%">
        <img src="images/0022book.jpg" style="width:100%">
        <img src="images/0024book.jpg" style="width:100%">
        <img src="images/0025book.jpg" style="width:100%">
      
      </div>
    </div>

    </body>
    </html>


<!-- end snippet -->

 


  [1]: http://www.albertfotografo.com/gallery.html
  [2]: https://mobirise.com/extensions/agencym4/sliders.html