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!

Hai trovato questo post interessante? Sei un utente twitter? Condividilo allora con i tuoi amici con un simpatico cinguettio semplicemente cliccando il tasto twittami. Grazie.





Potrebbe interessarti anche...

  1. Banner ingrandibili con js e css
    #banner{ he
  2. Clear di elementi flottanti via CSS (after)
    ***annuncioVide
  3. Altezza automatica DIV con elementi flottanti
    Inserendo eleme
  4. Tabella scrollabili orizzontalmente con i CSS
    Un breve tutori
  5. [CSS] Menù orizzontali
    In riferimento
  6. JS - CSS - Scroller javascript
    Un semplicissim
  7. Easy captcha without javascript images and math
    digg_url = 'ht

Related posts brought to you by Yet Another Related Posts Plugin.

11 Responses to “Banner ingrandibili SOLO css”

  1. MAvero aggiunge:

    Sei il solito porcellone! Fai il bravo che tra meno di 48 ore sarai un marito!

  2. Merlinox aggiunge:

    Io studio CSS per voi e voi mi date del porcellone… boh!

  3. Pigrecoemme aggiunge:

    Bello! Lo userò!

  4. Andrea@BV aggiunge:

    Ottima mossa! E il livello che la contiene deve avere anch’esso una height:auto, giusto?

  5. links for 2008-03-06 » Traffyk aggiunge:

    [...] Banner ingrandibili al passaggio del mouse grazie ai css [...]

  6. Adsense Espandibile | MrX aggiunge:

    [...] l’anno 2007 quando vi proponevo un sistema in CSS per creare banner espandibili. 4 marzo 2009, con la cautela di sempre, adsense propone i banner espandibili: "expandable [...]

  7. Dreamweaver Rollover aggiunge:

    [...] però vi può interessare un altro post sul rollover o sul [...]

  8. liliansi aggiunge:

    Uhm…credo sia errato il link all’immagine perchè io nella tua pagina non vedo nulla, solo una striscia arancione

  9. Merlinox aggiunge:

    @liliansi: evidentemente i simpaticono di image shack hanno deciso che non avevano voglia di ostare l’immagine. Provveduto subito con una sorpresa. Grazie per la segnalazione.

  10. liliansi aggiunge:

    eh a volte capita. io carico le foto sempre sul mio spazio via FTP perchè non mi fido per niente di imageshake. bel trucchetto con i CSS comunque, soluzione interessante! bella anche la foto ;) ciao!

  11. Merlinox aggiunge:

    Infatti spesso uso tinypic mi da molta affidabilità. Tempo fa usavo flickr, ma è una me**a e mi ha chiuso anche un account a pagamento senza motivo alcuno. Ora uso picasa web per quelle importanti, tinypic per quelle al volo, imgshack per quelle via url… ma come vedi non sempre vale la pena!

Commenti

Puoi tenere d'occhio i commenti di questo articolo col il seguente link RSS 2.0.