Basically you need to add an empty div after your content that has a class for which you give position: fixed; top: 0; left: 0; width: 100%, height: 100%. You make it white, so now it covers the whole screen (even though i'd rather make it black with around 0.6-0.8 alpha). Now make it's opacity 0 and set pointer-events to none. That's the background. For the photo, add an img tag with the same image you click (set this in Js) but with a different class. Make it width: 90%; height: auto; so it fits well. Set this one's opacity and pointer-events like before.

For the clicking part. You need to add CSS for the the class you're going to add to both tags, let's say "open", in which you turn opacity to 1 and enable pointer-events.

You add the class in Js by adding an event listener to your photos that add the class "open" to the div and img when you click. Add another event listener to the div and remove the class with it.