Search code examples
htmlcssslideshowmarquee

How to write text below every image in marquee slide show

I want to write three lines of text below every image in this marquee slide-show.

Fiddle

<marquee bgcolor="#FFFFFF" height="5%" width="600px" direction="left" scrolldelay="120" align="middle" >
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" width="120px" height="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5"/>
    <img src="Animal68.gif" height="120px" width="120px" border="5" />
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
</marquee>
Solution

  • Is this what you are looking for?:

    JSFIDDLE

    wrapping img tag with a div then style it like this: .item { float:left} (class item it is whatever you like, i just used here because that was the class used on the FIDDLE)