Image Hover Preview Help!

[Cindrine]

Hey guys

I am trying to figure out this code from this link,
http://www.dynamicdrive.com/style/cs...-image-viewer/

It all makes sense to me, except that the hover images i inserted are not hiding. They are plain to see, right next to the thumbnail. Am I doing something wrong? Or is safari not compatible with this function?

I'd show the code but there is no point, the only thing i did was change the images so that they were mine.

Thank you for any responses <3

[bluewalrus]

There is a point in posting the code or a link because your code must have a difference. Load the DD page in safari and see that it works there (or atleast does here).

[Cindrine]

Thank you for your help I decided to fiddle with it a bit more before posting it here, and it works fine now at least according to the example I found it from

Do you know if it would be difficult to center the rollover over the original image upon viewing? This code works great except its stuck in one spot, and I cant figure out how to move it with the image.

I'll post coding shortly, Thanks so much for responses

[Cindrine]

Here is the code

<a class="thumbnail" href="#thumb"><img src="images/Portfolio/al.jpg" width="135px" height="135px" border="0" /> <span><img src="images/Portfolio/al_ro.jpg" /><br />
Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="images/Portfolio/foru.jpg" width="135px" height="135px" border="0" /><span><img src="images/Portfolio/foru_ro.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="images/Portfolio/al_ro.jpg" /><br />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="images/Portfolio/foru_ro.jpg" /><br />Zoka Coffee</span></a>

CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

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

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

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

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0px;
left: 175px;
vertical-align: top; 
display: block;/*position where enlarged image should offset horizontally */

}

</style>