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

user_12777248 0
Viewed 380

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>

animation css html
2 Answers

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>

user_8963580

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>

user_15732670
Related