Within a grid, how do I add an overlay over an image that, when hovered over, darkens the image and has text show up in the center?

Question

I have a grid which has 2 images. These images are screenshots of my projects that I have been working (this is for my personal website), I want to add an overlay so when