The concept quite simple
Add two container into column,
step 1- One with background image attached plus as required height
step 2 - Second container with your text, image element and etc.. with max & min height as 50px with negative margin to overlay on first container plus overflow hidden.
Step 3 - on hover add transition and positioning either with padding and margin or relative and absolute positioning and transparent background to cover corner to corner of first container.
you are done:)
Not needed but you can try to play around with negative y axis translate effect on hove state too.Note:
not sure how behaves on mobile as mobile doesn't support hover.
Hope I am clear
Guys at coffeecup are awesometacular.