Het voorbeeld van de horizontale filmstrip spreekt voor zichzelf. Als je deze procedure op jouw website wilt gebruiken moet je de stylesheet in de head-sectie, en de html-code in de body-sectie van jouw pagina plaatsen. De zwarte "film-body" (die als background in de stylesheet gebruikt wordt) kan je downloaden met deze link van de .png-file.
<style type="text/css">
ul.filmstrip{
width:2004px;
height:170px;
background:url(filmstrip.png) 0 0 repeat-x;
padding:25px 0px 25px 0px;
margin:0px}
ul.filmstrip li{
float:left;
display:block;
padding:7px;
margin:0px;
opacity:0.7;
filter:alpha(opacity=70)}
ul.filmstrip li:hover{
opacity:1.0;
filter:alpha(opacity=100)}
ul.filmstrip li img{
border:0px;
height:100px;
width:140px;
margin:0px;
padding:0px}
div.filmstrip_div{
overflow-x:scroll;
overflow-y:hidden;
height:180px;
padding:0px}
</style>
<div class="filmstrip_div">
<ul class="filmstrip">
<li><img src="filmstrip-1.jpg"/></li>
<li><img src="filmstrip-2.jpg"/></li>
<li><img src="filmstrip-3.jpg"/></li>
<li><img src="filmstrip-4.jpg"/></li>
<li><img src="filmstrip-5.jpg"/></li>
<li><img src="filmstrip-6.jpg"/></li>
<li><img src="filmstrip-7.jpg"/></li>
<li><img src="filmstrip-8.jpg"/></li>
<li><img src="filmstrip-9.jpg"/></li>
<li><img src="filmstrip-10.jpg"/></li>
<li><img src="filmstrip-11.jpg"/></li>
<li><img src="filmstrip-12.jpg"/></li>
<li><img src="filmstrip-13.jpg"/></li>
</ul>
</div>