Banner ingrandibili SOLO css

All’articolo precedente abbiamo creato un banner estensibile usando JS e CSS, e associando il tutto ad un DIV.

Però si può fare di meglio, sfruttando la proprietà CSS del tag <A>: hover!

Impostando  il nostro <A> di altezza fissa, con overflow:hidden, possiamo dirgli di ingrandirlo in rollover!

Ecco il codicello:

<style type="text/css">
a.banner{
height: 120px;
overflow: hidden;
border:3px solid #ff6600;
margin: 0 0 10px 0;
/* firefox va solo con display:block... */
display:block;
float:left;
}
a.banner:hover{
height: auto;
}
</style>
<a class="banner" href="http://www.google.com"><img src="http://i43.tinypic.com/358ulqh.jpg" border="0" /></a>

Ed ecco l’esempietto:

Ciao amici!