Hover on image to give sense of link/something more

Hey all,

Very inexperienced CSS user here. i've recently updated from 7.0 to fluid. I'm trying to figure out how to get an overlay when hovering over a picture. Specifically I'd like a color with some opacity and the name of the project to appear with the hover. Exactly like the top image here  https://www.designsite.com/test-1 

Any help would be massively appreciated! 

You can use this approach to achieve this