This is legendary - best thing ive ever used

Hi, I'm currently working on designing my own website, and I have a few pics (as thumbnails) that I loaded on the page. All was good. I then went forward and created a CSS code so that when you hover with your mouse over the thumbnails you'd get a much bigger and clear picture. (This isn't anything new and I noticed it was discussed and used as an example even on this forum).
Everything works fine except that when I hover on the thumbnails the larger image appears under some of the other tuumbnails set on the page. I have space constraints on the page, so I can't distance the small thumbnails too far from one another, but I can't seem to get the larger images to appear to cover over the small thumbnails.
Any help would be appreciated.

Its Simply the best thing I got on the net...

millions of thanks !!!

The css/html coding works great for the pop-up images but the large images covers the other smaller thumbnails. Is there a code change that can be made to cause the large images to close?
Thanks,
~Lee

First off, nice code ~_^.

But please...

HELP! These Q's have been asked REPEATEDLY with no response!! I read ALL the comments, but to no avail:

1) When a thumbnail is near the right-hand side of the page, the page is resized and there is a horizontal scroll bar to allow the User to view the enlarged picture. How do we tell it to move the enlarged photo to the other side so that it isn't cut off or so there is no horizontal scrolling.

2) The text underneath the enlarged photo is only displaying within the thumbnail's size contraints. If we resize the thumbnail, the text will resize also and look nice but then the thumbnail is ugly.

3) When we hover over a thumbnail it enlarges a picture but you have to take your cursor off the ENLARGED photo before it disappears, not the thumbnail. This makes it feel very clunky. It needs to disappear when you move your mouse off of the thumbnail area.

PLEASE HELP!!!!

Okay, found a solution to question 2:

Add:
width: 610px;

To:
.thumbnail span{ /*CSS for the style to the box behind the enlarged image*/

and Add:
width: 600px;

To: .thumbnail span img{ /*CSS for enlarged image (they can all be resized here, just add width and height)*/

This tells each enlarged picture that it is only allowed to be 600 pixels wide. It will auto-resize the height (which I didn't think it did, so I didn't try it until I got desperate). This allows all the pictures to be relatively the same size so you now have a guide in order to resize the box that is behind the enlarged image. I resized mine to 605 pixels since there is a "padding: 5px;" which will handle the other side of the box.

To clarify: Now the text underneath the enlarged image knows that it can stretch to a width of 605 pixels before it does a page break and makes a new line. Beforehand it was going off of the "100%" and sizing itself to be 100% of the width of the thumbnails.

Still working on the other two questions... hope we can get some answers before I go insane, lol.

Check out my web site at http://expressions.sharepointsite.net

DO NOT ADD A WWW because it wouldn't work. I have added some Dynamic Drive content and want you to give some feedback at my homepage.

Yeah, not sure what that has to do with our current problems... but thanks.

Now we have a new Q#2:

When attempting to put a border around each thumbnail, hovering over a pic and having it enlarge leaves the thumbnails on top of the enlarged image. They are not hiding behind anymore. Removing the border remedies this, but it would be nice to have a border around them.

hello,
here is my website: http://gourbenj.free.fr/index.html
It's not finished yet, but I have some problems whith the thumbnails here: http://gourbenj.free.fr/pages/art/dessin/dessin.html you can see there is a scroll bar, and the bottom of the page is empty, I think it comes from the thumbnails image code because when I put it the page come down.

please tell me what to do.

thanks for this script

If you put the Html for the pure css popup inside a DIV tag with fixed dimesion and overflow set to auto and you insert so many images to make come out the scroll bar of the container DIV, IE 7 goes crazy Mozilla doesn't.