оживить изображение из одной точки в другую?(картинка прилагается)

Question

Чтобы быть более точным, я создал график, описывающий мой запрос:

По сути, у меня есть круглый логотип.Когда пользователь наводит курсор на него, я хочу, чтобы изображение лица человека всплывало, или, вернее, двигалось вверх с некоторой анимацией.Это то, что я могу сделать с css3?Или, может быть, есть другой метод?

Answer 1

это возможно в 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>

для перехода вы можете использовать JQuery

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

без проверки, хотя

РЕДАКТИРОВАТЬ: код анимации может быть схематичным: P