Effetto zoom sulle immagini nei topic


Tutorial Effetto zoom sulle immagini nei topic

Messaggio Da MattiaDes il Lun 29 Giu 2015 - 18:19

Effetto zoom sulle immagini nei topic

Grazie a questo tutorial potrai inserire la funzionalità di ingrandire le immagini al passaggio del mouse. Per fare tutto questo, dovrai aggiungere alcuni codici CSS sul tuo forum.

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"  


Una volta che sei nel foglio di stile del tuo forum, aggiungi uno dei seguendi codici CSS, basandoti sulla versione del tuo forum:

Effetto zoom sulle immagini nei topic Php31210 PHPBB3

Codice:
    .postbody .content img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .postbody .content img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Effetto zoom sulle immagini nei topic Php21110 PHPBB2

Codice:
     .postbody img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .postbody img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Effetto zoom sulle immagini nei topic Pun1210 PUNBB

Codice:
    .entry-content img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .entry-content img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Effetto zoom sulle immagini nei topic Inv1010 INVISION

Codice:
    .post-entry img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .post-entry img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Risultato:

Ecco un esempio di ciò che otterrai:

Effetto zoom sulle immagini nei topic VLRDsQI

Cambiare lente di ingrandimento

Volendo, è possibile cambiare la lente di ingrandimento che compare quando si passerà sopra l'immagine. Per farlo dovrai modificare il seguente link presente nel codice CSS: http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png

Effetto zoom sulle immagini nei topic Start-Menu-Search-icon

Buona giornata!  :zen:

Tutorial creato da: Shek (Forum di supporto francese)
Copyrigth ©️ FORUMATTIVO.COM




Effetto zoom sulle immagini nei topic Z_user10

Effetto zoom sulle immagini nei topic 1300 Effetto zoom sulle immagini nei topic 2203 Effetto zoom sulle immagini nei topic 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 23
Messaggi : 4012
Località : Modena, Italy


http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum