Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Effetto zoom sulle immagini nei topic

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Argomenti e Messaggi (Topic e Post)


Tutorial Effetto zoom sulle immagini nei topic

Messaggio Da MattiaDes Lun 29 Giu 2015 - 18:19

Effetto zoom sulle immagini nei topic


Definizione

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.

Effetto zoom sulle immagini nei topic VLRDsQI

Codice di stile CSS

Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS

Una volta che sei nel foglio di stile del tuo forum, aggiungi uno dei seguenti 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;
        }

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

Tutorial creato da Shek del forum dei forum Portoghese e Tradotto da Niko




Ultima modifica di Niko il Lun 1 Mar 2021 - 10:32 - modificato 1 volta. (Motivazione : Aggiornamento)


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à : 27
Messaggi : 5102
Località : Italy

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

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Argomenti e Messaggi (Topic e Post)

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