How to create an animation in which one block overlaps another?

Question

css

Here is an example of how it should work:
https://sumdu-my.sharepoint.com/:v:/g/personal/sh1...
I would be grateful for an example)

Answer 1

Answer 2

make the main wrapper, put two more blocks in it - one for the text, the other for the picture. Increase the height of the text block on hover. Blocks should be made with position:absolute; And z-index - the text index must be higher to overlap.