Thumbnail to Larger image

[KarenW]

Hi, I'm trying to learn CSS (with difficulty), however I'm getting there. I found on Dynamic Drive a great CSS code for hovering over thumbnails to a larger image. However, is there a way I can use this code (or something similar) and have the images opening in the centre of my page and not to the left and down as it is happening with this test page: http://www.cocosaccommodation.com/homestead1.html

Thanks in advance - Karen

[inspirations unlimited]

Why don't you go for LightBox http://www.huddletogether.com/projects/lightbox2/. It's easy to integrate and meant for gallery showcase.

[coothead]

Hi there KarenW,

and a warm welcome to these forums. ;)

To reposition the image adjust the highlighted values here....


.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top:20px;
left:200px; /*position where enlarged image should offset horizontally */
}

You should note that the top and left values may also be set to negative giving you the opportunity
of positioning the image in any direction. ;)

coothead