Popout/expand links on mouseover without changing text/elements flow

I'd like links to "pop out" of the page when hovering over them, without changing the position/flow of text/elements nearby.

See attached example shot. I'm pretty 开发者_开发知识库sure this is a simple position trick, but I'm having trouble getting it to work properly. I'd prefer this not to require any JS, if possible.

alt text http://www.stokke.me/_misc/popout_illustration.png

Any advice is much appreciated.

---

UPDATED: Cross-Browser support

DEMO: http://jsbin.com/anuka3/3

.zoom {
    position: relative;
    color: red;
}
.zoom span {
    display: none
}
.zoom:hover span {
    top: 0;
    left: -30px;
    bottom: -30px;
    display: inline-block;
    position: absolute;
    font-size: 40px;
    background: #333;
    color: #FFF;
    padding: 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.zoom:hover {
    text-decoration: none
}

Lorem Ipsum is simply <a class="zoom" href="#"><span>survive</span>survive</a> dummy text

---

I think what you're after is a tooltip, here's a hugely simple CSS tooltip I use frequently that can be styled anyway you choose:

CSS:

    a:hover 
{
background:#ffffff; 
text-decoration:none;
} /*BG color is a must for IE6*/

    a.tooltip span 
{
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}
    a.tooltip:hover span
{
display:block; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

HTML:

    Roll me <a class="tooltip" href="#">Tooltip<span>
Tooltip contents.
</span></a>.

If it messes with the flow of your other text, add a z-index.

Hope that helps you out :)

---

#Note:use hash(#) before Sitelinks

/* set size of links division and center on page */
#Sitelinks 
{
    margin-left: auto;
    margin-right: auto;
    background-color: #212121;
}

/* set font properties of links */
#Sitelinks p 
{
    font-family: arial, verdana, serif;
    font-size: 8pt;
    font-weight: 600;
    text-align: left;
    padding: 4px 0 0 25px;
}

/* set color of links and remove underline */
#Sitelinks a 
{
    color: #E5650A;
    text-decoration: none;
    position: relative;
}

/* set hover or roll over color of links */
#Sitelinks a:hover 
{
    background:#000000; 
    color: #ffafff;
    font-size: 30px;
    text-decoration: none;
}

#Sitelinks span 
{
    display:none; 
}

#Sitelinks a:hover span
{
    display: inline-block;
    font-size: 10px;
    background: #333;
    color: #FFF;
    padding: 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

<div id="Sitelinks">
    <a href="http://mixmasala.webfrnd.com">Mixmasala</a>
</div>