Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

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







MattiaDes
Moderattivo
Moderattivo

Sesso : Maschile
Età : 20
Messaggi : 2543
Località : Modena, Italy


Vedere 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

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum