I. HTML

1. Grid Image column Structure

Each column has an image and paragraph inside, and each column has a modal on top. Each image in the gallery is inside an anchor tag, this anchor tag is targeted when the image in the gallery is clicked, then the associate modal is shown.

2. Modal Structure

Firstly we cover the modal with adiv.modal-overall which will cover the whole screen with a dark background colour so we can see the modal content clearly, when the modal is displayed.We then create a modal :div.modal-wrapper with an image(which is the same as the one that is clicked in the gallery), and some paragraph for caption. And then we create an anchor link to close the modal.

This Structure is repeated depend on the how many images you have, but each modal must have a unique IDs ,and also each div that has an image inside must have a unique ID.

Two anchor links performs the magic

1. An anchor link that has an image inside, is targeted when image is clicked. The relevant modal is shown because this anchor link has href="#open-modal-1", which opens an modal with a unique ID called "open-modal-1".
2. The second anchor link is inside the modal, which has an attribute which reference to an id is inside the grid column, you can put this unique id inside the grid image if you want. Now the anchor link can be used to close the modal.

II. CSS

1. Modal with Full Screen Dark Background (hidden by default)

position: fixed; is used to keep the modal container fixed even when the user scrolls the page. ::before and content:'' are used to create a full screen dark background. Final, display:none; will hide this container until the user clicks any image on the gallery.

   
.modal-overall::before{
  content: '';
  position: fixed; /*MODAL CONTAINER IS SHOWN EVEN WHEN PAGE SCROLLED*/
  /*DARK FULL SCREEN BACKGROUND*/
  top:0;
  left:0;
  height: 100%;
  width:100%;
  background-color:rgba(0,0,0,0.8);/*DARKEN FULLSCREEN BACKGROUND*/
  display:none;/*HIDE THE MODAL CONTAINER ON DEFAULT */
}

2. Modal with image and close anchor (Hidden by Default)

We hide this modal using transform:translate(-50%,-200%); by default, and this -200% is will shift the modal vertically below the screen on default. The -50% is used to align the modal in the centre, with the help of the left:50%.We then use z-index:1000 so the modal is in front of the gallery or any other content in the page. Finally we put transition to animate the pop up event.

.modal-wrapper{
   position: fixed; /*KEEP SHOWING MODAL EVEN WHEN PAGES IS SCROLLED*/
   left:50%; /*centring the modal horizontally*/
   transform: translate(-50%,-200%); /*HIDE THE MODAL ON DEFAULT */
   transition:transform 200ms ease-out; /*ANIMATION THE POP UP*/
   z-index: 1000; /*MODAL APPEAR INFRONT OF GRID IMAGE*/
}

2. Show Modal when Image is clicked (using :target)

When the user click the image in the gallery, an anchor link that has an image targets an id which is in the modal, thus, the modal is opened, we use .modal-overall:target > .modal-wrapper to listen to find that particular modal and display it using transform: translate(-50%,0); to move modal to the screen viewport.

.modal-overall:target > .modal-wrapper{
   top:20%;
   transform: translate(-50%,0); /*SHOW MODAL CONTENT WHEN USER CLICKS THE GRID IMAGE(WHICH IS UNDERA ANCHOR*/
}
 

2. Show Modal container with dark full screen background

When the user click the image in the gallery, the modal appears, and thus, we use display:block; to show the modal container which is a dark full screen background.

.modal-overall:target:before{
  content:'';
  display:block; /*DISPLAY THE MODAL CONTAINER WHEN THE USER CLICK THE GRID IMAGE*/
}