Om bovenstaand voorbeeld op jouw pagina te zetten, moet je de stylesheet in de head-sectie van jouw pagina plaatsen, en de (onderstaande) html-code in de body-sectie. In dit voorbeeld is slechts één afbeelding gebruikt. Het is natuurlijk de bedoeling dat er verschillende plaatjes gebruikt worden in deze procedure.
<div class="docking-menu-container">
<div class="docking-menu">
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-1" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-2" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-3" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-4" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-5" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-6" /></a>
<a href="http://kompoos.nl/css/image-effects/docking-menu.html"><img src="dock.png" alt="dock-link-7" /></a>
</div>
</div>
<style type="text/css">
.docking-menu-container{
margin-left:50px}
.docking-menu{
display:inline-block;
height:100px}
.docking-menu a{
display:block;
float:left;
width:50px;
height:50px;
padding:25px 5px 0 5px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s}
.docking-menu a:hover{
width:100px;
padding:0}
.docking-menu img{
width:100%;
display:block;
border:0}
</style>