Ok, scrapped my original idea, and came up with a whole different approach using display:table. The vertical centering of the text is the tricky part... I'm not wild about this way as it needs WAY too many DIV (four total) to function, but it fixes TWO major concerns with your approach:
1) I trust absolute positioning of flow text about as far as I could throw the Big Stick. (aka the USS IOWA)
2) Every time the content text changed you'd have to redefine your media query to make sure the text doesn't flow out of the image. The switchover to normal cover from auto-adjusting height "needs" to be automatic and not some arbitrary fixed break-point. (ESPECIALLY not in pixels!)
3) It was built with no graceful degradation plan.
So here it is:http://www.cutcodedown.com/for_others/mikeHemberger/template.html
As with all my examples the directory:http://www.cutcodedown.com/for_others/mikeHemberger
...is unlocked for easy access to the gooey bits and pieces. I provided a backlink to your codepen and for now have the text explaining it in the document. If I have time over the weekend I'll likely move that part into my tutorials section of the site.
The biggest shortcomings are the extra markup (boo, hiss), and that for some reason Opera Classic (which some people still use thanks to ChrOpera being a giant middle finger to Opera's loyal fans, though most of us are on Vivaldi now)
seems to be halving again the height declaration. I don't consider either of those to be real deal breakers.
This was a interesting one as it's not something I'd even think of putting on a real website, which made it a bit of a challenge as it's out of my normal direction of thought.
Wonder if anyone can make it work without the extra DIV AND automatically adjusting to the content without scripting. I gave it my best... The float with a negative margin would work, if FF behaved like every other browser. I may present that method later just to show it... I think I already linked to the related bugzilla entry about that.