What am I doing wrong? Simple CSS Image Gallery

HTML & CSS
1

I really need some help with this, I will be forever in your debt.
What am I doing wrong?

html: http://paperpiratestudio.com/blake/lm/index.html
css: http://paperpiratestudio.com/blake/lm/css/styles.css

The enlarged image in my image gallery follows the cursor horizontally, but I need it to follow vertically, too. Notice when you hover over the lower images, the full sized image is still on the top. I can’t figure it out for the life of me!
Please help!

THANKS!!

2

A likely culprit looks like this line:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
[B][COLOR="#FF0000"]top: 0;[/COLOR][/B]
/* left: 230px; */
z-index: 50;
}

That’s pushing the <span> to the top of .gallerycontainer, which is the nearest positioned ancestor.

Another minor point to note – you shouldn’t include <style type=“text/css”> in a .css file. I’m not aware of any browsers that actually have a strop about this, but that doesn’t mean that a newer one that comes along next month won’t do…

3

Thanks! That worked great!
I have another problem now, when you move the mouse to the right quickly, it will stick on the last enlarged image because the cursor is on the enlarged image.
I want it to only enlarge when the cursor is over the thumbnail only, and not on the enlarged image. Is that possible?

4

Not easily (if at all) with that construction. The :hover effect is applied whenever your cursor is over part of the <a>. And as the enlarged image is inside the <a> tag, hovering your mouse over the enlarged image, if you can move it there quickly enough, will trigger the :hover effect.

5

Yes, that’s a bit of a problem having the image appear over other thumbnails. Another problem I see is that the rightmost enlargements site partly off screen for me.

I’d suggest you organize this gallery differently, like in this example:

http://www.visibilityinherit.com/code/the-jamieruth2-example.php