Gradually cover one image with other from left to right

Question

Is it possible to cover one image with other gradually from left to right? Something like loading one image over another. Or you can imagine progress bar with image instead of line. I hope you understand me.

I tried something like below but I don't want that fading effect and it's not changing color(image) from left to right.

 .bgImg { width: 500px; height: 500px; background-image: url(https://s14.postimg.org/unjnz24ld/rkfe2i3pdqqx.jpg); background-repeat: no-repeat; -webkit-transition: background-image 2s linear; -moz-transition: background-image 2s linear; -ms-transition: background-image 2s linear; transition: background-image 2s linear; } .bgImg:hover { background-image: url(https://s14.postimg.org/mi1m10iy9/gre.jpg); }

 <div class="bgImg"></div>

Answer 1

You can use gradient for colors as background and simply animate background-size then use your text inside html and no need to use it within the image:

 .bgImg { width: 500px; height: 150px; text-align:center; font-size:30px; background: linear-gradient(red,red), yellow; background-size:0% 100%; background-repeat: no-repeat; transition:2s linear; } .bgImg:hover { background-size:100% 100%; }

 <div class="bgImg"> Some text</div>

And if you want to still use your image consider animating background-position like this:

 .bgImg { width: 500px; height: 500px; background-image: url(https://picsum.photos/id/10/500/500), url(https://picsum.photos/id/15/500/500); background-repeat: no-repeat; background-position:500px 0,0 0; transition: 2s linear; } .bgImg:hover { background-position:0 0,0 0; }

 <div class="bgImg"></div>

Or consider the use of pseudo element like below:

 .bgImg { width: 500px; height: 500px; background: url(https://picsum.photos/id/15/500/500) center/cover; position:relative; } .bgImg:before { content:""; position:absolute; top:0; left:100%; right:0; bottom:0; background: url(https://picsum.photos/id/10/500/500) right/auto 100% no-repeat; transition: 2s linear; } .bgImg:hover:before { left:0; }

 <div class="bgImg"></div>