Question

I have a carousel with a set of thumbnails inside. When those thumbnails are clicked, a larger preview should fade in (center aligned above w/e thumbnail was clicked).

My problem is that the carousel’s container div has overflow: hidden; which obviously then clips away any elements within that. However, I NEED my larger preview to ignore that overflow: hidden rule. Is this possible?

The list items within the carousel also need position: relative on them otherwise I cannot get the larger preview to absolutely align above the clicked thumbnail.

Here’s an image to demonstrate:

The problem:
https://i.stack.imgur.com/2aoZ6.jpg

The result of what happens when I remove the overflow: hidden; on the carousel’s container DIV. https://i.stack.imgur.com/J3KSr.jpg

(the large thumbnail is exactly how I want it but then the carousel items/thumbs are not clipped away).

Any possible solutions? If not CSS, then jQuery based perhaps?

Answer 1

Why not use jQuery to attach the larger image to an element that is above the carousel container div? Just take the object you were displaying (or .clone() it if need be) and .appendTo() a div higher up in the hierarchy.

So when the given image is clicked you can either attach the larger image higher up the chain or have an existing styled div that you .show() and insert the proper content into.