Solitamente, per creare gallerie di immagini con qualche piccolo "effetto speciale" si è abituati ad utilizzare Javascript, un ottimo linguaggio di scripting, ma scrivendo codici lunghi e complessi, si rischia di rendere le pagine molto pesanti e quindi lentissime da caricare.

Con l'utilizzo dei fogli di stile si ha la possibilità di creare molti effetti particolari, in questo articolo verrà spiegato come simulare un effetto zoom su un'immagine al passaggio del mouse, in parole più povere , l'effetto che in javascript si otterrebbe con l'utilizzo dell'evento onMouseOver.

Innanzitutto bisogna creare due immagini, una con dimensioni ridotte (miniatura.jpg) e l'altra con dimensioni reali (grande.jpg).

Dopo aver creato le immagini si passa alla realizzazione del contenitore:

#contenitore {
    position:relative;
    top:30px;
    left:50px;
    width:80px;
    height:60px;
    color:#fff;
    background-color:transparent;
    z-index:100;
}

Ora si dovrà realizzare la classe per la miniatura a cui verranno associate le pseudo-classi che permetterano di definire lo stato del link (in questo caso della miniatura):

#contenitore a.miniatura, #contenitore a.miniatura:visited {
    display:block;
    width:80px;
    height:60px;
    background-color:#ffffff;
    color:#ffffff;
    text-decoration:none;
}

#contenitore a.miniatura:hover, #contenitore a.miniatura:active{
    text-decoration:none;
    color:#ffffff;
    background-color:transparent;
}