CSS animation - Image width from 0 to 100% movement difference - html

Question

I try to make an animation of an image from width 0% to 100%.
But there is a movement difference when I set the css style of an image in html.
If the image stye is set "width:100%" in html, the animation movement starting from top right corner.
If the image stye is not set, the animation movement starting from right to left.
What I need is set the image as width:100% in html and the animation movement from right to left.
Here is the demo link to
codepen : demo sample
.showVideoImage{
position: absolute;
width: 0%;
left: 100%;
transition: 0.5s;
}
.showVideoImage2{
position: absolute;
width: 0%;
left: 100%;
transition: 0.5s;
}
div.product-box:hover .showVideoImage
{
left: 0%;
width: 100%;
}
div.product-box2:hover .showVideoImage2
{
left: 0%;
width: 100%;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" style="width:100%"/>
</div>
</div>
<div class="product-box2">
<h2>hover me test2</h2>
<div class="showVideoImage2" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" />
</div>
</div>

Answer 1

You need to set the width of the img itself not the parent tag.
.showVideoImage{
position: absolute;
left: 100%;
opacity:0;
transition: 1s;
}
div.product-box:hover > .showVideoImage
{
left: 0%;
opacity:1;
}
div.product-box:hover img
{
width:750px;
}
img{
width:0px;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg"/>
</div>
</div>

Answer 2

You can just remove with:0, the image already in-visible and all you have to do is to change left CSS attribute value:
.showVideoImage{
position: absolute;
width: 100%;
left: 100%;
transition: 0.5s;
}
.showVideoImage2{
position: absolute;
width: 100%;
left: 100%;
transition: 0.5s;
}
div.product-box:hover .showVideoImage
{
left: 0%;
}
div.product-box2:hover .showVideoImage2
{
left: 0%;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" style="width:100%"/>
</div>
</div>
<div class="product-box2">
<h2>hover me test2</h2>
<div class="showVideoImage2" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" />
</div>
</div>