Jquery 使图像从一点动画到另一点？（附图）

更确切地说，我创建了一个图形来描述我的查询：

---

基本上，我有一个圆形标志。当用户将鼠标悬停在它上面时，我希望弹出一个人的面部图像，或者更确切地说，通过一些动画向上移动。这是我可以用css3完成的吗？或者可能还有另一种方法？

在jquery中也可以，但必须使用矩形图像作为圆（即中间有一个孔的正方形）。它的结构有点像这样：

<div id="logoContainer" style="position:relative; overflow:hidden">
  <img src="Box_With_Hole.png" style="position:absolute; left:0px; top:0px;">
  <img src="Man_With_Shiny_Head.png" style="position:absolute; left:0px; top:100%;">
</div>

但未经测试

---

编辑：动画代码可以给我简略介绍一下：p

谢谢，约瑟夫。只是一个问题，我的标志不只是一个黑色的圆圈，而是有文字在里面。我提到这个，因为在你的例子中，我用的是一个中间有一个洞的正方形。你认为你的答案仍然有效吗？嗯，可以。这些单词可以是另一个绝对位置的HTML元素，也可以是另一个png/gif或相同的png/gif，只要黑色部分实际上是透明的。

$("#logoContainer").hover(function(){$(this).stop().animate({
    top: "0%"
  }, 1000);
  $(this).stop().animate({
    top: "100%"
  }, 1000);
});