Question

To be a little more exact, I created a graphic describing my query:

Basically, I have a circular logo. When the user hovers over it, I want an image of a person’s face to pop up, or rather move up with some animation. Is this something I can get done with css3? Or perhaps there is another method?

Answer 1

it is possible in jquery, but you will have to use a rectangular image for the circle (i.e. square with a hole in the middle). it would be structured somewhat like this:

<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>

to transition you could use JQuery

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

untested though

EDIT: animation code may me sketchy 😛