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
Aquí hay un ejemplo https://mobirise.com/extensions/agencym4/sliders.html
Gracias anticipadamente
<!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>