Updated on CSS HTML

How To Move An Image In HTML?

You can easily move images around in HTML using the tag. It is used to create scrollable images either horizontally from left to right or right to left, or vertically from top to bottom or bottom to top. By default, the image in the tag will scroll from right to left.

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

The marque tag attributes:

direction: Sets the scrolling direction of the images. The value of this attribute can be left, right, up or down.
behavior: The behavior tells you how the text scrolls. It can be one of the following values: interleaving, scrolling, slide.

Example 1: The following example uses a scrolling behavior.

<!DOCTYPE html>
<html>
 
<body>
<center>
    <!-- The image has scrolling behavior to left -->
    <marquee  behavior="scroll" direction="left">        
          <img src=
"https://.......image.jpg"
          alt="Image"> 
    </marquee>  
     
   <!-- The image has scrolling behavior to the upper direction. -->
   <marquee  behavior="scroll" direction="up">         
          <img src= 
"https://.......image.jpg"
          alt="Image"> 
    </marquee>  
</center>
</body>
</html>

Example 2: The following example uses alternative behavior.

<!DOCTYPE html>
<html>
<body>
 
<center>
    <marquee  behavior="alternate" direction="left">          
          <img src=
"https://.......image.jpg"
          alt="Image"> 
    </marquee>  
     
   <marquee  behavior="alternate" direction="right">         
          <img src= 
"https://.......image.jpg"
          alt="Image"> 
    </marquee>  
</center>
 
</body>
</html>

Recommended Articles