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:
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{
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
Qui potete aggiungere una descrizione
#1Federiko Aka The Killer
Bisogna usare un link “
O si può fare a meno del link? Quindi solo
#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?
#3Mega69
Si, a causa di IE che supporta la pseudoclasse :hover solo su un link
#4Federiko Aka The Killer
Anche per FF?
#5Mac
C’è una lieve differenza di resa fra IE e Mozzilla (nel posizionamento del blocco quando è effettuato il rollover). Come risolverla?
#6gianni
i tutorial sono infarciti di pubblicità e non c'è un link ad una demo liive..
non mi trovo con il vostro sito ..