html css how to show the animation within the container division?-CodePudding

The below code working fine as per my expectations. But the problem is that the animation has not working within the container division. The animation showing on bottom of the page, but not within the container . Is it possible to help me, thanks

#my_move_imgs {
  display: inline-block;
  bottom: 15%;  
  position: absolute;
  overflow-x: hidden;
  animation: moveImage 6s linear infinite;
  left: 1px;
  white-space: nowrap;
}

@keyframes moveImage {
    100% {
      transform: translateX(calc(100vw - 100px));
    }
}

                <div id ="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
                <div id="my_move_imgs">
                    <img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
                    <img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
                    <img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
                </div>
                </div>

CodePudding user response：

You've got two things going wrong that are combining to push the images beyond the edge of the container.

The first issue is that you've applied overflow-x: hidden; on the wrong element. It should go on the container whose contents might overflow, not on the content element. So that means applying it to #sew_container instead of #my_move_images.

The second issue is position: absolute;. Absolutely positioned elements break free of their ancestors. In particular, they ignore overflow:hidden unless the element with an overflow rule is also position: relative or position:absolute.

A minimal fix to make it work looks like this:

#sew_container {
  overflow-x: hidden;
  position: relative;
}

#my_move_imgs {
  display: inline-block;
  animation: moveImage 6s linear infinite;
  position: absolute;
  bottom: 15%;
  left: 1px;
}

@keyframes moveImage {
  100% {
    transform: translateX(calc(100vw - 100px));
  }
}

<div id="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
  <div id="my_move_imgs">
    <img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
    <img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
    <img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
  </div>
</div>

That being said, I'd suggest skipping the inline-block and absolute positioning in favor of a flex layout. This might be easier to set up and would prevent any animation stuttering that might come from using positioning and transform. Here's one way you could do it:

#sew_container {
  display: flex; /* make this a flex row */
  align-items: end; /* positions #my_move_imgs at the bottom */ 
  padding-bottom: 5%; /* put space below images. You may need to tweak the value */
  box-sizing: border-box; /* makes the padding part of the #sew_container's 220px height, not added to it.*/
  overflow-x: hidden;
}

#my_move_imgs {
  animation: moveImage 6s linear infinite;
}

@keyframes moveImage {
  100% {
    transform: translateX(calc(100vw - 100px));
  }
}

<div id="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
  <div id="my_move_imgs">
    <img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
    <img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
    <img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
  </div>
</div>

CodePudding user response：

Try removing bottom: 15%; from #my_move_imgs

#my_move_imgs {
  display: inline-block;  
  position: absolute;
  overflow-x: hidden;
  animation: moveImage 6s linear infinite;
  left: 1px;
  white-space: nowrap;
}

@keyframes moveImage {
    100% {
      transform: translateX(calc(100vw - 100px));
    }
}

                <div id ="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
                <div id="my_move_imgs">
                    <img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
                    <img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
                    <img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
                </div>
                </div>