Zoomed image is cut-off by parent overflow:hidden

[Knordy]

Our layout contains the images in a div with the style overflow:hidden. When the images are zoomed they do not act as a true overlay and are cut off by this parent div.

I couldn't create a fiddle, but you can replicate this behaviour by adding this to your site:

<div style="position:relative;">
  <div style="overflow:hidden;">
    <img src="img/palm.jpg" data-action="zoom">
  </div>
</div>

As you can see by clicking the palm img, the image will be zoomed, and cut off. According to this site it should be possible with a different css positioning.

[claudiofrs]

I'm having the same problem.

edited: I'm adding the click action to the element you want to click to zoom, for changing the css from overflow hidden to visible.

And to turn it again to hidden, I tweak the zoom.js prototype function a little bit by adding a custom function to toggle css styling from visible to hidden in Zoom.prototype.close.

[ElegantSudo]

I'm having this issue too. @claudiofrs that's awesome! Would you be able to create a fork of your solution with the additions you suggested and possibly a small (doesn't have to be pretty) example?

I'd love to dive in and check it out.

[kitce]

It adds a class "zoom-overlay-open" to "body" element when an image is zoomed, so I think overriding the css would be good enough in this case:

.zoom-overlay-open .originally-hidden-element {
  overflow : initial;
}

[ElegantSudo]

@kitce this is the issue we're talking about: http://codepen.io/yipyop/pen/RRpOKQ. I don't know if what you're saying makes sense with that example.

It's really about the parent element that the image is contained within.