There are problems with your HTML. The left hand is not REALLY to the left of the right hand, it just looks that way because the line wraps and the hand ends up on the next line. That's why you need margin-top:-52%
for the one and margin-top:-28%
for the other to get then to line up on the same vertical position on the screen. You should fix that first.
Also, since everything has vertical-align:baseline
by default, the two images align themselves to each other's bottoms. That is, if one moves down, the other moves down too. But that is easily fixed by giving them vertical-align:top
explicitly.
Now I fiddled a bit with your fiddle, but by the time I was done, I had changed so much, removed so much stuff unnecessary for the demo, that I'm not sure you can still use it. Here it is, just in case.
(I wasn't able to fix some of the problems though. If you hover the mouse near the top of the hand, it will slide down a little bit but then it will no longer be hovered over; and it will disappear from view because the other animation kicks in. The full slide down effect happens only when you have the mouse near the bottom of the window.)