If you have not seen this effect in action, i recommend you to visit akismet.com and right click on their logo, else here is a Demo that i made. I’ve got to say seeing this in the akismet site was quite inspiring. Well, isn’t it a cool effect and I have got to say they have used this in the best way possible.

If it is “How” that has been hitting you, i have included a snippet of the HTML and Javascript below.

The HTML

 <div id="about-me">Image<br /> <h1>Shashabooey!</h1></div>
 <div id="logo">A.Vi.Nash</div>

The CSS

#about-me{display:none;opacity:0;}

The Javascript

                $(document).ready(function () {

                $("#logo").bind('contextmenu',function(e){
                    e.returnValue= false;
                    return false;
                }).bind('contextmenu',function(e){
                    setTimeout('$("#about-me").fadeIn().animate({height:"280px",opacity:1},400)',400);
                        e.PreventDefault();
                        });
                $("#about-me").bind('click',function(e){
                    $(this).animate({height:"0px",opacity:0},400);
                    });
                });

Check out the Demo here

Do try this effect, and do share what more awesome things you’ve done using this effect.