View Full Version : Hiding Overflow

07-03-2011, 04:00 PM
This might not be as simple as the title suggests. It may be a CSS problem, please say so if you know it to be and I will move it to the correct forum.

Now for the question,

Please visit:


I am using the jquery plugin supersized to create a carousel of images in the background of the page. As you will see though, as the transition starts, the second image is visible. I only want it to be visible when it indeed starts to overlap the current image. (i.e when the bench image overlaps the trees etc)

Here is the CSS:

* { margin:0; padding:0; }
body { background:#111; height:100%; }
img{ border:none; }

#supersized { position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:50%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/

#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:50%; background:#111; display:block; }
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:50%; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }

Thanks guys