The problem with that solution tommy is that the hover area is much smaller than the image being changed. Also, the images overlap with those of its neighbours.
I can't think of how to do that without using a bit a of javascript at least.
*edit* Unless i surrounded the hover area with some other divs and did something like this:
Code:
#div1 {
background-image:url(yellow.jpg);
width:50px;
height:50px;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
#div1:hover {
background-image:url(black.jpg);
width:300px;
height:300px;
z-index:2;
}
#div2{
width:300px;
height:250px;
position:absolute;
top:50px;
left:0px;
z-index:3;
}
#div3{
width:250px;
height:50px;
position:absolute;
top:0px;
left:50px;
z-index:3;
}
Is that it? Is there some way to avoid surrounding the button div? Let's hear your solution harry.