Om deze slide procedure op jouw website te laten werken moet je de style-sheet in de head-sectie van jouw pagina plaatsen en de html-code dient in de body-sectie terecht te komen. De procedure is cross-browser en valideert op alle mogelijke manieren.
<style type="text/css">
#horizontal-slide{
list-style-type:none;
overflow:hidden;
height:240px}
#horizontal-slide li{
float:left}
#horizontal-slide li a{
display:block;
height:240px;
width:30px;
float:left;
text-decoration:none;
border-right:1px solid #fff}
#horizontal-slide li a img{
width:30px;
height:240px;
border:0}
#horizontal-slide li :hover, #horizontal-slide li a:hover img{
width:180px}
</style>
<ul id="horizontal-slide">
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-1.jpg" alt="slide-image-1" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-2.jpg" alt="slide-image-2" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-3.jpg" alt="slide-image-3" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-4.jpg" alt="slide-image-4" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-5.jpg" alt="slide-image-5" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-6.jpg" alt="slide-image-6" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-7.jpg" alt="slide-image-7" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-8.jpg" alt="slide-image-8" />
</a></li>
<li><a href="http://kompoos.nl/css/image-effects/horizontal-slide-image.html">
<img src="horizontal-slide-9.jpg" alt="slide-image-9" />
</a></li>
</ul>