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:

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;
        }

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;
        }

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;
        }

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:


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


Buona giornata!  :zen:

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




avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 3121
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

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

- Argomenti simili

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