first is a hover q -- the transition when you hover on the column (ease in?) is nice, but when you move off the column, the change is super abrupt. i've just got "ease" right now, which google tells me is kind of like using both ease in/ease out, but i've also tried ease-out and ease-in-out and but they all seem to do the same thing (abrupt reset once you stop hovering). is there anyway to fix that? { position:relative; top:50px; left:-160px; width:760px; opacity:0.15; }

:hover { opacity:1;
-webkit-transition: 2s ease; -moz-transition: 2s ease; -o-transition: 2s ease; transition: 2s ease; }

second is a pet q -- if i get rid of .avatar_head, the first three columns of pets are super wide and the other eight are scrunched up against each other. how do i keep that from happening?

if you put the transition styling in the column div instead of the column hover div, the transition should animate both ways and you won't get the "jump" you're describing.

for the pets thing, try this?

td {width:100px!important} tr, td {padding:5px}

add your transition to both selectors

{ position:relative; top:50px; left:-160px; width:760px; opacity:0.15; -webkit-transition: 2s ease; -moz-transition: 2s ease; -o-transition: 2s ease; transition: 2s ease; }

:hover { opacity:1;
-webkit-transition: 2s ease; -moz-transition: 2s ease; -o-transition: 2s ease; transition: 2s ease; }

thank you both! i'm glad my transition problem only needed a tiny fix ;w;

and the pets thing worked too, !! now i'm really not sure how i want to list my pets on my profile, haha