Clipping of Text in Caption Overlay when scaling web page

Hello,

I am trying to get my website to have nice images that are links to other projects.

I want the look of the caption as an overlay. Both the image and text need to be clickable links.

I am struggling getting the text to not be clipped, cropped, or otherwise different between screen sizes. For instance it looks great on a desktop and looks terrible on a tablet.

Please see screen shot of an example of what is happening.

Any ideas on how to do this so the text scales properly across all screen sizes?