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.

zoom - 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:

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

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

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

zoom - 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

zoom - 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)


zoom - Effetto zoom sulle immagini nei topic Z_user10

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

Sesso : Maschio
Età : 28
Messaggi : 5129
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.