Floating image on mouse over link

Drarkan · 12-31-2010, 09:28 PM

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 · 01-03-2011, 08:24 PM

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

HTML Code:

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

Code:

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;
}

12-31-2010, 09:28 PM	#1
Drarkan New Member Join Date: Dec 2010 Posts: 1	Floating image on mouse over link 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?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode