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 of the image?

Question

I have a grid which has 2 screenshots (the imgs) of webpages I have worked on and want to post on my personal website (porfolio). I want to add an overlay so when you hover