How To Create A Simple HTML Scroll Box For Your Images

If you're looking for a quick and simple way to create a scrolling box for your images, check out this simple tutorial.

Below is the demo I have created of a basic scroll box in HTML, which will allow you to scroll from top to bottom with your mouse to see the images contained inside the area. Let's check out the demo and code!

The Demo:

HTML:

Below is the simple HTML code as seen above with a few of my illustrations embedded into it:

<div style="border:1px solid black;width:700px;height:466px;overflow:scroll;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9fq3I1QWQwmZMl7vir4yzW18g1piNzQcQlngqAYYi4FDhtWChP5VaEL3STLegmCbTgeqK0IdbduXYi3Q7yVhwVtfGc6sxb0xssmApcw5Ge-lsW2bjoGTDaJAJmQWJkJQ4O2cDdCffc2s/s1600/Self_Portrait_By_Justin_Woodie_1.jpg" width="700" height="466" title="Self Portrait" alt="Self Portrait By Justin Woodie" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1hK85PDMEWu6upe-NSiDfSl4cZqwMadTmtJIdLrN6sFVizUZj5gxb7iyvStBE1j-GOARKlYzI-dPWGydYAXmkBobjDuUo-mWBFwA526BeQjKZNb3rrTnW9NBpGKkPWk-egW4cg54cOc/s1600/British_Marines_By_Justin_Woodie_1.jpg" width="700" height="544" title="British Marines" alt="British Marines By Justin Woodie" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5a7mxiceRRo7ybwh-QaGJH2pLEsJ5pbGaVINVfge7f6x0ZE2IKOyO3JtuB6u-5eQVpkQeQgVOMfiwtGSYBcggurJeUhztmLxiIV0_2tLWFlvvNNJOgIJFWz5Z6xnQigIAlKjZMbX9og/s1600/Jack_Vs_The_Mutants_By_Justin_Woodie_1.jpg" width="700" height="538" title="Jack vs Mutants" alt="Jack vs Mutant By Justin Woodie" />

</div>

Now lets view the code without my illustrations embedded within it and instead bold text is used as a placeholder, which can be replaced with your own images and information:

<div style="border:1px solid black;width:WIDTH OF SCROLL BOX GOES HERE;height:HEIGHT OF SCROLL BOX GOES HERE;overflow:scroll;">

<img src="HOSTED IMAGE URL GOES HERE" width="IMAGE WIDTH GOES HERE" height="IMAGE HEIGHT GOES HERE" title="IMAGE TITLE TEXT HERE" alt="IMAGE ALT TEXT HERE" />

<img src="HOSTED IMAGE URL GOES HERE" width="IMAGE WIDTH GOES HERE" height="IMAGE HEIGHT GOES HERE" title="IMAGE TITLE TEXT HERE" alt="IMAGE ALT TEXT HERE" />

<img src="HOSTED IMAGE URL GOES HERE" width="IMAGE WIDTH GOES HERE" height="IMAGE HEIGHT GOES HERE" title="IMAGE TITLE TEXT HERE" alt="IMAGE ALT TEXT HERE" />

</div>