how to place text over top of an image?

Hello,
I am interested in placing some text/link over top of an image.
The post content will contain a link to an image as in:
<div id="image"><img src="https://blah.com></div>

then in the top right corner of the image, there will be some text such as
<div class="info">Photo Info</div>

This would allow me to click on the text in the corner of the image to link to another page.

The only way I know how to do this is to use absolute positioning for the .info. However, the image (ie post content) is centered on the page, so the image’s corner absolute position changes with the browser size.

What else can I try?

For a real ugly mock-up work-in-progress, you can see:
https://www.alpinevisions.dryfly.ca
The text “Photo Info” is what I’m trying to move.

thanks