如何清除背景图片溢出？

Question

I'm trying to remove the overflow from a background-image within a div. I've got 4 divs with identical images that create one background image(I position each image so that it matches across the 4 divs). Basically I'm trying to animate the "singular" image to the left and have another image replace it within the same animation(which is really just a css transition). The problem is that the overflow: hidden hides the overflow but when you move it to the left you get to see the rest of that hidden image.

Is there any way to clip or remove the overflow so that my transition will look like one image moving to the left?

Css

.changeOver{
background-repeat: no-repeat;
background-position:130% !important;
-webkit-transition:  2s;
-moz-transition:  2s;
-o-transition:  2s;
transition:  2s;}

The Script

$('#change').click(function () {
   $('#fourth').addClass('changeOver');
    setTimeout(function(){ 
        $('#fourth').css('background-image', 'none'); 
    }, 5000);
    setTimeout(function(){ 
        $('#fourth').css('background-color', 'blue'); 
    }, 1);

    setTimeout(function(){
    $('#third').addClass('changeOver');
    setTimeout(function(){ 
        $('#third').css('background-image', 'none'); 
    }, 5000);
    setTimeout(function(){ 
        $('#third').css('background-color', 'blue'); 
    }, 1);
    }, 2000);

    setTimeout(function(){
    $('#second').addClass('changeOver');
    setTimeout(function(){ 
        $('#second').css('background-image', 'none'); 
    }, 5000);
    setTimeout(function(){ 
        $('#second').css('background-color', 'blue'); 
    }, 1);
    }, 4000);

    setTimeout(function(){
    $('#first').addClass('changeOver');
    setTimeout(function(){ 
        $('#first').css('background-image', 'none'); 
    }, 2000);
    setTimeout(function(){ 
        $('#first').css('background-color', 'blue'); 
    }, 1);
    }, 6000);    
});

Edit: Here's the jsfiddle just click the button labeled 'yes'

Answer 1

Edit: So, without redoing all your code, the problem is that you aren't moving the divs themselves.

Put {outline: 1 px solid red;} in them and you'll see that they don't actually move, which is why you're scrolling through the background. Hiding your overflow doesn't actually help unless you're moving the divs themselves, which you aren't.

You could alter the image so that whatever you want beneath it is already on it. So, the overflow is actually a different image, but they'd be the same file.

So, something like |main image|next image| all attached. That would make it look like the image is being pulled in.

If you want more of a static reveal, you would have to create four images with transparencies where the overflow would be.

It's very easy and you can even do it online with pxlr.

Otherwise, you have to animate actual divs and not just