How to Move Image in HTML ?

Last Updated : 29 Dec, 2023

In this article, we will see how we can move images in HTML. You can easily move images in HTML using <marquee> tag. It is used to create scrolling images either from horizontally left to right or right to left, or vertically top to bottom or bottom to top. By default, the image found within the <marquee> tag will scroll from right to left.

Syntax:

<marquee>
   <img src="">
</marquee>

Attributes of <marquee> tag

Attributes	Description
direction	Sets the direction for the scrolling images. The value of this attribute can be left, right, up, or down.
behavior	The behavior tells about how the text scrolls. It can be one of the following values which are alternate, scroll, slide, etc.

Example 1: In this example, we will see the implementation of above method by using scroll behavior.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <!-- The image has scrolling behavior to left -->
        <marquee behavior="scroll" direction="left">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                 alt="GeeksforGeeks logo">
        </marquee>
 
        <!-- The image has scrolling behavior to the upper direction. -->
        <marquee behavior="scroll" direction="up">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                 alt="GeeksforGeeks logo">
        </marquee>
    </center>
</body>
 
</html>

Output:

Example 2: In this example, we will see the implementation of above method by using the alternate behaviour.

HTML

<!DOCTYPE html>
<html>
<body>
 
<center>
    <marquee  behavior="alternate" direction="left">          
          <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                 alt="GeeksforGeeks logo"> 
    </marquee>  
     
   <marquee  behavior="alternate" direction="right">         
          <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                 alt="GeeksforGeeks logo"> 
    </marquee>  
</center>
 
</body>
</html>