I'm trying to create a tab that will slide down when hovered over, using a background image so it's labeled (ie "Minion"). This is the effect I'm going for. This is probably more a flaw with the design of the profile than it is with my coding, but before I scrap the tab design and try something else, I wanted to ask if anyone else had any ideas.

I've got the transition animation down, it's the tab content that's the problem. I've tried aligning the content to the bottom of the div, giving everything z-index values and sticking the tabs beneath everything else, hiding the content with creative use of padding and overflow, but no dice.

Is it possible to make this work, or do I just need to go for a different design?

Do you have any code left from where you tried and failed to achieve the effect you wanted? It should be fairly easy to do actually, setting the label as background image of appropriate tab and sticking it at the bottom of the div, then manipulating padding, margin and height of the tab when transition is not in effect so that only that bg shows up.

I tried playing with padding, but it only seemed to stretch the div. I just couldn't get the content to hide. Maybe I'm missing something; I would be thrilled if you could figure it out.

This is the profile I'm working on, so you can see what it's doing. Here's the relevant snip, without any padding: {display: block; position: absolute; margin-top: 259px; margin-left: 480px; background: transparent url(http://i.imgur.com/IOPTMr6.png) bottom no-repeat; height: 30px; width: 118px; transition: 2s; overflow: hidden;} :hover {height: 160px; transition: 2s;}

Oh damn, really sorry about this, I was pretty busy for two or three days and I admit this totally slipped my mind >>

Anyway, yes, you want those tabs to extend downwards so trying to do this by changing the height of the minion etc div won't work. You will have to use the z-index and position changing method. Right now your main profile picture is set as a background image for pet_info which is the parent div for all other profile elements so it's impossible to give one of these elements a lower z-index to hide it underneath. You will want to set the picture as background for pet_desc instead and put your profile text in a new div you create inside pet_desc.

Uh, I really have to run right now so it's a mess, everything I didn't want to bother with stuck to the side, but [here] xD ([this] is how the code looks now, I also changed all positioning to normal top left etc positioning, doing it with margins is not a really good idea) Feel free to ask if you have any questions!

Oh my gosh, you are a rockstar. I probably should've thought of that myself. Thank you!

I'll finish it up later tonight, but I've got the slide-down working now. I really appreciate your help!

Awesome, glad you got what you needed :D Best of luck!