-How do I get them to hover in a gliding fashion seamlessly? I have no clue what to apply them properly to get them to work.
In the element, w/out the hover pseudo, put
{property value; -prefix-transition: <property> <duration> <timing> <delay>;}
-Where the blue property is, is the one you want to change, with the values for that property set.
-Then in the transition property, you specify the property you want to change, along with the transition time (duration), timing, and delay.
--You don't need timing function or delay, just the property you want to change and the time it takes to change.
-Then when you hover the element, just set the new height you want, and it will smoothly transition.
So lets say your about section
#id_about {height: 200px; -moz-transition: height 2s;}
#id_about:hover {height: 300px;}
I use Firefox, so I use the -moz- prefix, however, you should set it to all the supporting browsers, so everyone gets the same feel. Not just you, remember, your profile is really for other people, not yourself. So if you only make it look good to you, it might not look good to the next person if it's not browser compatible.
-How do I JUST get ONLY the content to show without having the default 'Trade Items' to show up?
#id_contact ul li:nth-of-type(3) a: {visibility: hidden;}
#id_contact ul li:nth-of-type(3) a:before {
content: ' ↔ ';
visibility: visible;
}