How to move an image in HTML?

To move an image in HTML, you can use the CSS transform, CSS position, and CSS animation properties.

The <marquee> tag is also used to wrap around inside a <img> tag to move an image horizontally or vertically. However, it has been deprecated in HTML5 and is no longer supported in some browsers.

Let’s look at how to move an image in HTML using CSS - transform, position, and animation.

• CSS transform: The transform property lets you move, rotate, skew, and scale an element. You can use the translate function to move an image in HTML using CSS.



<img src="my_file.png" style="transform: translate(60px,120px);">



• CSS position: The position property lets you position an element relative to its parent container. To move an image, use the position property to absolute or relative and then the top, bottom, left, and right properties to move an image.



<div style="position: relative;">
   <img src="my_file.png" style="position: absolute; left: 60px; top: 120px;">
</div>



• CSS animation:The animation property lets you create animations for a specific element. You can use different animation properties to move image an image in HTML like the animation-name, animation-duration, animation-timing-function, animation-delay, etc.



<img src="my_file.png" style="animation: move 5s ease-in-out infinite;">
@keyframes move {
  from {left: 0;}
  to {left: 110px;}
}