Hi Nik,
You can create an image modal as follows:
Component:
<aura:component>
    <ltng:require styles="{!$Resource.ImgPopUp}"/>

    <img id="myImg" src="{!$Resource.Background}" alt="Snow" style="width:100%;max-width:300px" onclick="{!

c.clickedImage}"/>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close" onclick="{!c.closePopUp}">&times;</span>
        <img class="modal-content" id="img01"/>
        <div id="caption"></div>
    </div>
</aura:component>

Controller.js
({
clickedImage : function(component, event, helper){
     /*Get the modal*/
      let modal = document.getElementById("myModal");

      /*Get the image and insert it in the modal*/
      let img = document.getElementById("myImg");
      let modalImg = document.getElementById("img01");

      modal.style.display = "block";
      modalImg.src = img.src;
},

closePopUp : function(component, event, handler, modal){
    modal.style.display = "none";
}
})

You have to place all the css in a static resource and then use the CSS. You can put the CSS in static resource as 

follows:
Step 1. Go to Setup->Type Static Resource in Quick Find Box->Click Static Resource-> Click New.






Step 2. Give the name of your static resource.




Step 3. Upload the file in the upload section.



Step 4. Select Public from Cache Control.
Step 5. Click on Save button to save the file.

You can use your uploaded Static Resource in the component by using  <ltng:require styles="{!$Resource.<Resource 

Name>}"/>.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.