Geekissimo

Effetto Popup sulle immagini con CSS

 
Shor (Angelo Di Veroli)
21 Maggio 2007
6 commenti

Dopo la guida della scorsa settimana sull’effetto opaco per le immagini con Css, oggi vi spiegherò come applicare un effetto popup alle immagini sempre con il codice CSS. Praticamente una volta che passate con il mouse sopra l’immagine si otterrà un effetto popup, senza che il blocco dei browser possa bloccarlo.
Per applicare l’effetto popup alle vostre immagini seguite i 2 semplici punti che seguono:

Codice da inserire nel vostro foglio di stile css

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS per le immagini allargate*/
position: absolute;
background-color: #ECFDCE;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS per le immagini allargate*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS per le immagini allargate*/
visibility: visible;
top: 0;
left: -50px; /*posizione orizzontale dove volete che appaia l’effetto popup*/

}

Codice html dell’esempio qui sopra

Qui potete aggiungere una descrizione

Categorie:
Potrebbe interessarti anche
Articoli Correlati
100 ottime risorse per il web 2.0 design

100 ottime risorse per il web 2.0 design

Se siete dei web designer, questo allora è proprio il vostro giorno fortunato! Infatti noi di Geekissimo abbiamo appena sfornato proprio per voi una delle nostre mega-liste: 100 ottime risorse […]

Bottoni sexy con CSS

Bottoni sexy con CSS

Geekissimo Dopo la guida sull’effetto opaco per immagini con Css e la guida sull’effetto Popup sulle immagini con CSS, eccone un altra molto utile. Grazie a questa guida potremo realizzare […]

Effetto opaco per immagini con Css

Effetto opaco per immagini con Css

Se volete utilizzare nel vostro sito immagini con effetto opaco anche detto “effetto Off”, non c’è bisogno di utilizzare 2 immagini differenti. Potete risparmiare moltissimo tempo grazie al codice Css. […]

Guida: creare un bottone antipixel solo con i CSS

Guida: creare un bottone antipixel solo con i CSS

Dopo il grandissimo successo che hanno avuto gli articoli sui 2.000 bottoni antipixel e i 42 Layout Faux in CSS, ecco una sintesi dei 2 post. Se volete cimentarvi e […]

53 tecniche CSS per tutti gli usi

53 tecniche CSS per tutti gli usi

Ecco una bellissima lista di 53 tecniche CSS da utilizzare per i vostri siti Web o Blog. In ogni sito c’è un tutorial su come eseguire e compilare il codice […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

  • #1Federiko Aka The Killer

    Bisogna usare un link “

    O si può fare a meno del link? Quindi solo

    21 Mag 2007, 7:34 pm Rispondi|Quota
  • #2Federiko Aka The Killer

    Whops ho notato che non mi fa vedere i codici.

    Comunque la mia domanda era: si inserire un link per forza?

    21 Mag 2007, 7:36 pm Rispondi|Quota
  • #3Mega69

    Si, a causa di IE che supporta la pseudoclasse :hover solo su un link

    21 Mag 2007, 8:34 pm Rispondi|Quota
  • #4Federiko Aka The Killer

    Anche per FF?

    21 Mag 2007, 9:14 pm Rispondi|Quota
  • #5Mac

    C’è una lieve differenza di resa fra IE e Mozzilla (nel posizionamento del blocco quando è effettuato il rollover). Come risolverla?

    11 Giu 2007, 3:03 pm Rispondi|Quota
  • #6gianni

    i tutorial sono infarciti di pubblicità e non c'è un link ad una demo liive..
    non mi trovo con il vostro sito ..

    8 Mar 2011, 10:45 am Rispondi|Quota