Image scrolling up and down in HTML/CSS

share link

by Abdul Rawoof A R dot icon Updated: Jan 18, 2024

technology logo
technology logo

Guide Kit Guide Kit  

The scrolling images were achieved using the HTML <marquee> tag. Using this tag, you can give your images a horizontal scroll or a vertical scroll.

You can easily move images in HTML using the <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. Expand the drop-down menu next to the Scrolling direction option and select Down motion scrolls down to switch to natural scrolling. There's no need to restart your PC. The changes will take effect immediately. You can also switch back to reverse scrolling the same way if you change your mind. To make a scrolling image we can use the CSS animation property (to apply an animation to the element) along with the @keyframes rule (to define the animation). Here, we're actually making the inner <div> element scroll. This element contains the image so the image scrolls too.

Here is an example of how to scroll image up and down in HTML/CSS: