CSS Popup Image Viewer - HELP PLEASE

[nicknack]

Ive not been using CSS for long and recently discoved the popup image veiwer tutorial and its perfect for some work im currently doing.

But im having trouble with my pop up, ive got the thumbnail placed at the top right side of my web page and i want the pop up to come up in the center of the page.

Heres the code im currently using:

<DIV STYLE="position:absolute; top:10px; left:1020px; ">

<style type="text/css">


.thumbnail:hover{
background-color: transparent}

.thumbnail span{ ;

visibility: hidden;}

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

.thumbnail:hover span{
visibility: visible; position:relative center}

</style>

<a class="thumbnail" href="#thumb">
<img src="http://i52.photobucket.com/albums/g12/NickMcB/Junction2.jpg" border="0" /><span>
<img src="http://i52.photobucket.com/albums/g12/NickMcB/Map-1.jpg" />

</span>
</a>
</DIV>


As you can see im using <div> codes to place my thumbnail, anybody know what i have to change to center the pop up?


P.S
I took the original coding from:
http://www.dynamicdrive.com/style/cs...-image-viewer/

and got rid of what i didnt think i needed (dashed border ect)

Thanks alot in advance for any help provided

Nick

[boogyman]

Welcome to DD, please review the posting policies and regulations regarding posting a question thread, http://dynamicdrive.com/forums/showthread.php?t=24866

change

.thumbnail:hover span{
visibility: visible;
position:relative center
}

to

a.thumbnail:hover span {
     visibility: visible;
     position: absolute;
     top: Xpx;
     left: Xpx;
}

and play around with the X-axis and Y-axis coordinate

[nicknack]

Thanks alot that works perfectly