Javascript 从左到右逐渐用另一个图像覆盖一个图像

是否可以从左到右逐渐用另一个图像覆盖一个图像？类似于将一个图像加载到另一个图像上。或者你可以想象进度条上有图像而不是线条。我希望你能理解我

我试过下面这样的方法，但我不想要那种褪色效果，而且它不会从左到右改变颜色（图像）

.bgImg{
宽度：500px；
高度：500px；
背景图片：url(https://s14.postimg.org/unjnz24ld/rkfe2i3pdqqx.jpg);
背景重复：无重复；
-webkit转换：背景图像2s线性；
-moz变换：背景图像2s线性；
-ms转换：背景图像2s线性；
过渡：背景图像2s线性；
}
.bgImg:悬停{
背景图片：url(https://s14.postimg.org/mi1m10iy9/gre.jpg);
}

---

您可以使用渐变色作为背景，只需设置背景大小的动画，然后在html中使用文本，而无需在图像中使用：

.bgImg{
宽度：500px；
高度：150像素；
文本对齐：居中；
字体大小：30px；
背景：
线性梯度（红色、红色），
黄色的；
背景大小：0%100%；
背景重复：无重复；
过渡：2s线性；
}
.bgImg:悬停{
背景大小：100%100%；
}

---

一些文本

请注意发布时收到的警告。不允许您链接到CodePen是有原因的。我给你做了一个片段。谢谢，我找到了类似的东西。但是，如果图像不仅仅是一些颜色和文本，例如：我想用以下内容更改图像：