How to animate text in an image?

Question

css

Created an image grid with flex https://codepen.io/Jeerjmin/pen/QayLqZ
And I want text to appear on hover:
like here jsfiddle.net/8h177njo/.
or here https://webdesigncup.net/demowp/luminis/portfolio-...
But here they use background to fill the block, which is not convenient. maybe I will add photos 1920x1080, but I don’t want to crop it manually.
The difficulty is that I do not understand how to set the position so that the text is always in the center of the photo?

Answer 1

https://codepen.io/prodavecmacdonalds/pen/GyoKYQ?e...