Display image outside <div> where overflow:hidden?

Question

I'm using Ganesh's very wonderful jCarouselLite jQuery plugin to display a scrolling series of thumbnail images at the top of a page. The container div necessarily has overflow:hidden to limit the number of thumbnails displayed at any one time. I would like to display a larger version of the thumbnail when the mouse hovers over it. I'm most of the way there using CSS but I can't persuade the large image to display outside the confines of the parent div due to the overflow setting and it displays "clipped" within that div.

Is this possible using CSS?

Answer 1

You must either resize your div or move image outside overflow:hidden; div. overflow:hidden will always clip content.

It would be easier to help if you posted few lines of your code.

Answer 2

There is no way to show a child element outside the bounds of a parent element that has overflow:hidden set. The best way to accomplish the desired affect is to move the larger thumbnail images outside of the div that is clipped, and show/hide it with javascript.

Answer 3

This wouldn't be possible with CSS unless you resize your container, but you could use jQuery to append the image to the body, then position and animate it over the thumbnail.