here's source code;
-------------------------------------------------------------------------------

/* USERLOGO HOVER IMAGE*/

.railbody .userlogo img#user_logo_image {opacity: 0;}
.railbody .userlogo img#user_logo_image:hover {opacity: 100;}
.rail .userlogo {
background: url(Put your image.url here) no-repeat center;
border: 5px double #000;
font-size: 0;
height: 100px;
padding: 1px;}

-------------------------------------------------------------------------------------


STEP:

1. Just copy the above code (NOTEPAD)
2. Edit/change the highlighted text(Put your image.url here).
3. Be sure that the size of your picture is 100x100 pixel.
4. Don't use the same image with ur original headshot.it won't WORK...
U can also use jpg,png & gif format.
3. and LASTLY, paste HERE


"Put your image.url here"

example image:
http://images.multiply.com/multiply/logo/logo-on-letters-70.png




SAMPLE CODE: PASTE AT THE TOP OF YOUR CUSTOM CSS

---------------------------------------------------------------------
/* USERLOGO HOVER IMAGE*/

.railbody .userlogo img#user_logo_image {opacity: 0;}
.railbody .userlogo img#user_logo_image:hover {opacity: 100;}
.rail .userlogo {
background: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png)
no-repeat center;
border: 5px double #000;
font-size: 0;
height: 100px;
padding: 1px;}
----------------------------------------------------------------------

IT'S 100% WORKING!!!

Remember: This tricks is 0nly w0rk in ur site... but It's nice! Tnx


credits. xavierkym :)