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!
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.