Begin by stacking two images on top of each other using the CSS property position: absolute;. Using background images, you can achieve this layout:
<div class="container">
<div class="image1"></div>
<div class="image2" id="image_resize"></div>
</div>
CSS:
.container {
position: relative;
width: 300px;
height:200px;
}
.image1 {
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
background-repeat: no-repeat;
}
.image2 {
position: absolute;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
background-repeat: no-repeat;
}
To animate the second image, one option is to use jQuery's animate function. Alternatively, with vanilla JavaScript, you could do something like this:
var percent = 0; // This variable will track the percentage width increase
/* Execute a function every 50 milliseconds using setInterval */
var myInterval = window.setInterval(function() {
var img = document.getElementById('image_resize');
img.style.width = percent+"%";
percent ++;
if(percent > 100) {
clearInterval(myInterval);
}
}, 50);
Check out this live example on jsfiddle: https://jsfiddle.net/c51u6r8t/