What Is This Web Effect

When you reach 1000 reputation on stack overflow you get an expendable usercard when you mouse hover on the card. How can I recreate this effect ? How is it called ? My guess is i

Solution 1:

I don't know if this is what they use, but CSS3 transition animations would be a simple, no programming way to do it.

Solution 2:

A really simple example of what you are after is here http://jsfiddle.net/RjpLt/

It's enough to get you started.

UPDATE

Now with ccs animations: http://jsfiddle.net/RjpLt/1/

Solution 3:

In a nutshell:

When the popup is triggered, a <div> with the appropriate content is dynamically added somewhere inside the DOM (most likely Javascript positions the popup as well as creates it). This element starts out small and is then animated to its final dimensions. Meanwhile, CSS rules specify the visual appearance of the popup. When the mouse leaves the popup area, the <div> is removed from the DOM, making the popup disappear.

Solution 4:

I'm sure it does use jQuery, and I'm betting it's "animate":

http://api.jquery.com/animate/

The styling animated is probably size and background color, along with other things happening to the area.

Solution 5:

I think it'a simple $('#container).show('slow');