Choose a card, any card...

Currently working on a website for a client... they asked if I could display some cards on a page that had a skill on one side, and when you hovered over with the mouse they flipped to the other side with information about that skill.  My response was, "do they need to look 3D?"  When the answer was no, I told the client I could take care of it right away.

Using JQuery:

  $("#box1").mouseenter(function(){
    var div=$("div");
    div.animate({width:'0px',left:'100',opacity:'0.4'},"slow");
    div.animate({width:'200px',left:'0',opacity:'0.8'},"slow");
  });
  $("#box1").mouseleave(function(){
    var div=$("div");
    div.animate({width:'0px',left:'100',opacity:'0.4'},"slow");
    div.animate({width:'200px',left:'0',opacity:'0.8'},"slow");
  });

The "trick" here is to move the card at the same time you shrink the width, then move it back as you expand the width.  This creates the "flipping" effect.