Floating image on mouse over link

[Drarkan]

what I want to do is figure out how to make an imageOver effect where when someone hovers over a link in my menu it will show an image that is larger than the area, like a transparent frame, or a series of stars, so it doesn't distort my menu by having the image larger than the <div> frame. Any thoughts?

 

[PixelPusher]

Sure that is possible. Off the top of my head...

<a href="#" class="float-img">Appear on Hover
   <span>
        This content only appears when a user hovers over the link.</span>
</a>

a.float-img {
   position:relative;
   overflow:hidden;
   display:block;
   padding:0 10px;
   height:35px;
   line-height:35px;
   text-align:center;
   text-decoration:none;
   font:bold 9pt Arial;
   color:#333;
   background-color:#eaeaea;
   border:solid 1px #cbcbcb;
}
a.float-img span {
   position:absolute;
   top:-120px;
   right:-100px;
   display:block;
   width:75px;
   height:100px;
   padding:10px;
   line-height:14px;
   font:italic 8pt Arial;
   color:#fff;
   background-color:#f00;
}
a.float-img:hover {
   overflow:visible;
   background-color:#ababab;
   color:#222;
}