What am I doing wrong? Simple CSS Image Gallery

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!


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…

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?

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.

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: