Search code examples
hyperlinkhoverbackground-imagerollover

link rollover to change the background image

is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?

heres what im working with 

#hover_img img
{
display:none;
}

#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;

}

html

  <div id="hover_img">LINK<img src="image" alt="" /></a></div>

thanks!

** fiddle http://jsfiddle.net/5yhsL/ **

Solution

  • Add z-index: -1 to the image on hover:

    #hover_img:hover img
{
    display:block;
    position:absolute;
    top:0px;
    padding-top:0px;
    z-index: -1;
}