In de "wat mindere browsers" is het effect aardig maar niet om over naar huis te schijven. Gebruik je Opera, Chrome of Safari (en soortgelijke browsers) dan komt het effect, ten volle, tot zijn recht: Animatie van afbeeldingen zonder een snippertje javascript. Plaats de onderstaande html code in de body sectie van jouw pagina en de stylesheet in de head-sectie.
<ul class="shrink-image">
<li><a href="#"><img src="shrink-image-1.jpg" alt="shrink-plaatje-1" /></a></li>
<li><a href="#"><img src="shrink-image-2.jpg" alt="shrink-plaatje-2" /></a></li>
<li><a href="#"><img src="shrink-image-3.jpg" alt="shrink-plaatje-3" /></a></li>
<li><a href="#"><img src="shrink-image-4.jpg" alt="shrink-plaatje-4" /></a></li>
</ul>
<style type="text/css">
.shrink-image{
padding:0;
list-style:none;
position:relative;
width:300px;
height:300px;
border:5px solid #808080}
.shrink-image li{
width:150px;
height:150px;
float:left}
.shrink-image li a{
display:block;
width:150px;
height:150px;
position:relative;
overflow:hidden}
.shrink-image li a img{
border:0;
position:absolute;
left:-300px;
top:-300px;
opacity:0.5;
filter:alpha(opacity=50);
width:600px;
height:600px;
-webkit-transition:0.75s ease-in-out;
-moz-transition:0.75s ease-in-out;
-ms-transition:0.75s ease-in-out;
-o-transition:0.75s ease-in-out;
transition:0.75s ease-in-out;}
.shrink-image li a:hover img{
position:absolute;
left:0;
top:0;
opacity:1;
filter:alpha(opacity=100);
width:200px;
height:150px}
</style>