Slide out

[monkeytooth]

Im trying to figure out the best means of approaching having dynamically created elements expand when hovered over. I know JS will have a hand in handling the effect but that I'm not to concerned about so much as having the CSS back it up so it all positions correctly after things are said and done. Now generally expanding an element I know is just height/width. But I want to have it so the element expands in its current spot but overlays the rest of the content, without effecting the content by pushing it one way or another. I hope that makes sense, best example I can think of off the top of my head is when you go to a code snippet site and when you mouse over the code shown. the element expands to show all the code while leaving everything else intact...

[cssfreakie]

i have a seen quite a few of your questions now, and before i give a hint i recommend you just buy a manual for css. everything you asked so far is so basic, that even if you would google for it, it should pop up. Adn i don't mean to insult anyone here, but reading a decent books takes you only a week or so. If i were you I would do that.

 

Now back to you question.

the properties you need are position: absolute. z-index and pseudo hover.

 

[monkeytooth]

I have plenty of books lol grant it I don't read them cover to cover like I should. But of them I have never really seen what I'm trying to convey here, maybe its because I am just putting more thought into it, and in concept most of my questions here recently revolve similar properties I know that much. I'm just trying to figure out the best approach before I spend I dunno how long being frustrated on concept.

 

My weak visual attempt and trying to show what I mean (just picture the lower half of the representation sliding out to where it is from where it was on the upper half (which that yes I know again is JS related to make that portion happen, but again its the positioning I am stuck on as far as the CSS portion of it goes.)..

[cssfreakie]

i just posted a link on another question of yours, I recommend to check that out it shows what i meant. only thing extra is the pseudo hover class, but that isn't rockets science either.

 

#element{
position: /*anything other than static */ ;
}

#element:hover{
  z-index:10;
}