Continuous Test Orchestration And Execution Platform Online

Perform automated and live-interactive testing on 3000+ real desktop and mobile devices online.

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;}
    }

LambdaTest

Test your websites, web-apps, or mobile apps seamlessly with LambdaTest.

Start Free Testing
LambdaTest

Earn resume-worthy Selenium certifications that help you land a top job.

Learn More
LambdaTest

Test your web or mobile apps

Test orchestration and execution cloud of 3000+ browsers and OS

Support

24/7 support

Security

Enterprise grade security

Cloud

Fastest test execution cloud