I'm facing a challenge in removing the overflow from a background-image within a div. There are 4 divs with similar images that combine to form one background image (I adjust the position of each image so they align across the 4 divs). Essentially, I want to animate the "singular" image to the left and have another image replace it within the same animation (which is essentially a CSS transition). However, the issue arises when using overflow: hidden to hide the excess part of the image - moving it to the left reveals the rest of the hidden image.
Is there a method to clip or eliminate the overflow in order for the transition to appear as if one complete image is shifting 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);
// Additional code for third, second, and first
});
For more details and a working example, check out this JSFiddle link. Just click on the button labeled 'yes'.