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:

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*/

}