Learn how to move a DOM element

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

How do I move an image in HTML?

If you are looking to move an image on a HTML page, there are various techniques you can use:

Moving image with CSS transform

The transform property allows you to rotate, move, skew and scale any DOM element. Using this technique, you can move an image on an HTML-based page.

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

Using CSS position to move an image

The position property lets you position an element relative to its parent container. Use the position property to indicate how to move the DOM element. Then you can use the left, right, top and bottom attributes to indicate the position of the DOM element.

<div style="position: relative;">
   <img src="random_image.png" style="position: absolute; left: 30px; top: 60px;">

Using CSS animation to move an image

The animation property allows you to create a CSS animation for a specific DOM element. You can use different animation properties to move the element, specifically you can use animation-name, animation-duration, animation-timing-function, animation-delay and more.

marquee tag (deprecated)

The <marquee> tag can also be used to wrap an img tag and move it either horizontally or vertically. This tag has been deprecated in HTML5 and is no longer supported in some browsers.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Questions