Html CSS动画-图像宽度从0到100%的移动差异

我尝试制作一个宽度为0%到100%的图像动画

但是，当我在html中设置图像的css样式时，有一个移动差异

如果图像样式在html中设置为“宽度：100%”，则动画将从右上角开始移动。 如果未设置图像样式，动画将从右向左移动

我需要的是在html中将图像设置为宽度：100%，并将动画从右向左移动

这里是到的演示链接

codepen

：

.showVideoImage{
位置：绝对位置；
宽度：0%；
左：100%；
过渡：0.5s；
}
.showVideoImage2{
位置：绝对位置；
宽度：0%；
左：100%；
过渡：0.5s；
}
div.product-box:hover.showVideoImage
{
左：0%；
宽度：100%；
}
产品分类框2：悬停显示视频图像2
{
左：0%；
宽度：100%；
}

悬停我测试1
悬停测试2

您只需使用：0删除

，图像已可见，您只需更改
左侧
CSS属性值：


.showVideoImage{
位置：绝对位置；
宽度：100%；
左：100%；
过渡：0.5s；
}
.showVideoImage2{
位置：绝对位置；
宽度：100%；
左：100%；
过渡：0.5s；
}
div.product-box:hover.showVideoImage
{
左：0%；
}
产品分类框2：悬停显示视频图像2
{
左：0%；
}

悬停我测试1
悬停测试2
您需要设置
img
本身的宽度，而不是父标签的宽度


.showVideoImage{
位置：绝对位置；
左：100%；
不透明度：0；
过渡：1s；
}
div.product-box:hover>.showVideoImage
{
左：0%；
不透明度：1；
}
div.product-box：悬停img
{
宽度：750px；
}
img{
宽度：0px；
}

悬停我测试1