Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms.
Initially, only the grey image (div1) is visible while the green image (div2) remains hidden with its width set to 0. At a certain point on the page, a progress event occurs where the width of div2 needs to increase using Javascript based on the progress made, eventually covering div1.
The desired outcome is for X% of the space to display the green image depending on the progress, while the rest displays the grey image. To achieve this, both divs must be positioned at the same location and have the same size.
Here is an example of what the final result should resemble:
The attempted implementation looks like the following:
HTML:
<div class="left" id="container">
<div class="image original" style="background-image: url(/PATH/TO/IMAGE)">
</div>
<div class="image green" style="background-image: url(/PATH/TO/IMAGE_GREEN)">
</div>
</div>
CSS:
.image {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
#container{
position: relative;
.original {
width: 100%;
}
.green, .blue{
width: 0%;
}
}
To ensure the entire background image is contained within the div container, it was necessary to add:
background-size: 100% auto
Including this caused the image to become responsive. However, when increasing the width of div2 from 0 to 100%, the background image did not align perfectly with that of div1 during the process as the whole image was compressed into the smaller div2. As a result, it appeared as shown here:
The main objective is for the two background images to match seamlessly throughout the transition.
How can this particular effect be successfully achieved?