Help with CSS hover

[Glacophane]

Ive seen topics posted on hover so far but none have answered my questions. I used the code for CSS popup image viewer on my myspace page. I finally got the code to work somewhat. However when I move the mouse over the picture, it will show up, but if a small picture is next to it, that pic will show up through the larger one. Im not too famaliar with CSS yet to figure out how to fix it. Any help would be greatly appreciated.

This is the code I got from the DF page:

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
..;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;

}


And this is the code with my picture links:

<a class="thumbnail" href="#thumb"><img src="http://i79.photobucket.com/albums/j124/glacophane/car2.jpg" width="100px" height="66px" border="0" /><span><img src="http://i79.photobucket.com/albums/j124/glacophane/car2.jpg" /><br />Jealous?</span></a>

<a class="thumbnail" href="#thumb"><img src="http://i79.photobucket.com/albums/j124/glacophane/car3.jpg" width="100px" height="66px" border="0" /><span><img src="http://i79.photobucket.com/albums/j124/glacophane/car3.jpg" /><br />Want a ride?</span></a>


Im not sure if you need more code than that to look at, but here is my page as well so you can get an idea of what I mean.
http://www.myspace.com/moilsrustyblade

[boogyman]

this is a z index problem... your "smaller" images are just being referenced as having a higher z index.... so just make the popup have a bigger z-index then the smaller images.

.thumbnail span:hover{
visibility: visible;
top: 0;
left: 60px;
z-index: 100;
}

while z-index:100 is greater then the z-index of your initial thumbnails

[Glacophane]

Thanks for the help. It must be myspace, but whenever I enter in the z-index and save it, myspace deletes it and leaves ...; in its place.

[boogyman]

why dont you leave a message with "tom" and explain your situation. I am sure that he put in some type of hack that you can use.

[mburt]

Note:

If z-index of both objects are the same (0 in this case), whichever comes last in the code will be placed on top.

Ex:

<a href="#" style="position:absolute;left:20px;top:20px">Test 1</a>
<a href="#" style="position:absolute;left:20px;top:20px">Test 2</a>

The link "Test 2" will always be on top.

[boogyman]

but mike.... that brings up the WONDERFUL problem IE has with positioning :|

[mburt]

Right..

Now that I feel stupid...

[mburt]

All I was saying though, if MySpace doesn't support x-index (for whatever reason), you could just rely on positioning in the code. But I guess it doesn't work

[Glacophane]

I finally figured out what the problem is. Apparently myspace wont support a z-index above 10. It has something to do with not covering up the ads and banners which is a violation of myspace TOS. So in response myspace just automatically deletes anything over 10. I changed the z-index to 9 and it works perfectly (even though I wasnt trying to cover up any ads).

but now that I have that fixed, Im trying to figure out how to impliment the same thing, except with a link. I want a link (ex. my friends list with names) so when you "hover" over the link, a picture appears but I havent gotten that down yet.

Thank you guys for all your help though.