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