Welcome to Gaia! ::

Coprophagous's avatar

Shirtless Businesswoman

Hello,
For a while now I've been trying to figure out how to do the sliding effect such as on this page when you hover over the links in the upper left. I'm trying to make one for the comment, pm, trade, add links. Any help is appreciated smile
kittymmeow's avatar

Fashionable Fatcat

Coprophagous
Hello,
For a while now I've been trying to figure out how to do the sliding effect such as on this page when you hover over the links in the upper left. I'm trying to make one for the comment, pm, trade, add links. Any help is appreciated smile

Just kinda a note that your profile CSS is generally a mess... And I really don't know where you randomly got the rather explicit class names, because they are not dong anything.

Anyway, those links on that tumblr were done simply with margins, transitions, and the :hover pseudoclass. Give the div that contains a link a left margin and the transition properties, then in its :hover declaration block, give it a different left margin.

Code:
.panel h2{
display:none;
}

.panel{
-webkit-transition:0.6s ease-in-out;
-moz-transition:0.6s ease-in-out;
-o-transition:0.6s ease-in-out;
transition:0.6s ease-in-out;
}

.custom_panel {
padding:10px;
width:200px;
position:absolute;
margin-left:10px;
-webkit-transition:0.6s ease-in-out;
-moz-transition:0.6s ease-in-out;
-o-transition:0.6s ease-in-out;
transition:0.6s ease-in-out;
}

.custom_panel:hover {
margin-left:-15px;
}

#id_custom_5648{
top:0px;
}

#id_custom_5650{
top:40px;
}

#id_custom_5652{
top:80px;
}

#id_custom_5654{
top:120px;
}

#id_custom_5656{
top:160px;
}
I've done more work than I had to here, since I also just cleaned up some general things about the links not relating to their actual moving, as well as added a transition to the panels in general, so they look a little nicer and fit with the links a little better when you hover over them.

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games