Member Avatar for padrict

I''m having an issue my page. When you mouse over an image a text box pops up - that's how i want it. However, I uploaded a few new pics and now every time you mouse over the image the box come up but it is partially hidden behind the picture next to it.Even more strange, the images that were there before do NOT have the same problem. I'm at a loss. Any help would be greatly appreciated.

here's the page :

  • 4 Contributors
  • 3 Replies
  • 105 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

— the behaviour you describe (popup shows but is partly hidden by the neighbouring image) is almost always a stacking-context / clipping issue rather than an image bug. was right to flag z-index, but the usual hidden causes are: an ancestor with overflow: hidden that clips the popup, or an ancestor that creates a new stacking context (for example transform, opacity < 1, filter, will-change, isolation, or a positioned element with its own z-index). The new images may live in a different wrapper or have different CSS, which explains why older images work and the new ones do not.

Quick checklist to isolate and fix:

  • Inspect the popup and the image in DevTools. Look up the DOM tree for any overflow: hidden or transform/filter on parent elements.
  • Ensure the popup element is positioned (position: absolute/fixed) so z-index applies.
  • If a parent must keep overflow:hidden or a transform, remove the popup from that container and append it to document.body, then position it using getBoundingClientRect().

Simple fixes (examples):

.popover {
  position: absolute;
  z-index: 9999;
}

If you cannot change the ancestor styles, move the popup to the page root and compute its coordinates in JS (append to body and set left/top from getBoundingClientRect()).

Debug tips:

  • Compare the HTML wrappers and CSS classes of a working image vs a broken one — differences usually point to the culprit.
  • Temporarily toggle overflow and transform in DevTools to see which change makes the popup visible.

For a short, authoritative read on stacking contexts and z-index, see Understanding z-index and stacking contexts.

Recommended Answers

All 3 Replies

Member Avatar for Slade007

the pop up hides the image that is mouseovered, the bottom half to be more preciese, it itself is not hidden, i see no problem

Member Avatar for JugglerDrummer

This could be a z-index problem. Also, sometimes media elements don't behave themselves in layers.

Member Avatar for MidiMagic

I do so hate sites that do that. Inevitably the image that pops up hides the one I wanted, so I can't get to it.

Please don't make stuff happen unless I actually click.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.