|
|
#1 |
|
New Member
![]() Join Date: Dec 2010
Posts: 1
|
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?
|
|
|
|
|
|
#2 |
|
Super Moderator
![]() Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,053
|
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;
}
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
![]() |
| Tags |
| image effects, images, menu |
| Thread Tools | |
| Display Modes | |
|
|