How to fix hover animation?

Question

css

How to make rounded edges work when playing animation?
https://jsfiddle.net/tpd12ram/4/
If it is impossible with a gradient (as it is now), then how to make a similar animation with a picture (I commented out the link to it below)?

Answer 1

https://jsfiddle.net/tvwm3qjz/