How to animate text on hover?

Question

css

There is a block with a picture, when you hover over it, text with animation and background should appear.

When connecting Animate.css, the text is animated if you hover the mouse directly over the text itself, but you want the text to appear with animation when you hover over the block itself with the mouse

How to implement this using jquery?
Is there any other animation option without using animated.css?

A good example from the guys in the portfolio section: https://magora-systems.ru/

Answer 1

And mark it as a solution.
https://jsfiddle.net/z2qL7hu1/
https://jsfiddle.net/yoh3ypat/

Answer 2

Without and with Animate&Jquery

Answer 3

Like so?
https://jsfiddle.net/98e1f162/