Effetto Popup sulle immagini con CSS
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: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
5 Commenti
Scritto da Shor
Calciopro
CineTivu
Dissacration
Finanzalive
Geekissimo
GingerAndTomato
GuadagnoRisparmiando
IoChiamo
IoVideogioco
Medicinalive
Politicalive
Starlettime
TheAppleLounge
UltimoGiro
Ecologiae
Bisogna usare un link “
O si può fare a meno del link? Quindi solo
Whops ho notato che non mi fa vedere i codici.
Comunque la mia domanda era: si inserire un link per forza?
Si, a causa di IE che supporta la pseudoclasse :hover solo su un link
Anche per FF?
C’è una lieve differenza di resa fra IE e Mozzilla (nel posizionamento del blocco quando è effettuato il rollover). Come risolverla?