CSS help needed for roll over image

General information for the website: We are a marketplace like etsy for handmade teddy bears
Description of requirements/features: Need someone to update a the CSS on the following web page http://www.bearpile.com/test.cgi so that the functionality is the exact same as what you see on twitter when you heart something.

Much of this coding is already done (like the sprite animation, the ajax and some of the JS functionality).

Just need to have you make it so that when you roll over the heart icon it swaps in the proper image (either red or grey heart) using CSS from a sprite image (rather than individual graphic files as is the case now).

Also, need to make it so when you click on the heart image, it will show a sprite animation and then change the sprite image to red and change the color of the like count text in a DIV to red also.

If you unclick the heart, it will change the sprite image to the grey heart and also change the text in a DIV to grey.

lastly, it will show a CSS hover title tag that looks just like the one used on Twitter (same color & design). when you hover over the heart it will show 'Like' if the heart is grey, or will show 'Unlike' if the heart if red.

- Must be done using simple CSS and no frame works other than Jquery.
- Must work on all platforms (pc/mac/noble/tablet, ipad/android, etc)
- Swapping in and out any of the images (including the animation) should not change the size of the HTML table that it is in.
- All Ajax/SQL development will be done by me, so no need to focus on any of that.
Extra notes: