Is it possible to change the source image when you hover over an icon? I'm trying to do some code so that, in the journal, when you hover over any of the user icons they all transition to an "anonymous" type of icon.

I've fiddled with z-index and the like. Maybe my brain is just fried from the long day I've had but I just can't get it to work, so if anyone can help or tell me if it's possible that would be super.

My current code in the stylesheet is:

.userpic { position: relative; width:100px; height:100px; float: left; margin-top: -50px; padding-right: 10px; }
.userpic img, .userpic:hover { position: absolute; background-image: url('http://i.imgur.com/ZeUtl2a.png'); width: 100px; height: 100px; position: relative; z-index:2; }

I've messed with it so much that it's messy and falling apart now alas. The best I've gotten was for the image to appear, but it would appear underneath the user icon and over to the right, despite setting top: 0px; and left: 0px; so I don't even know at this point.

Any help is appreciated.