Come sfumare le immagini al passaggio del mouse in WordPress (semplice e facile)

Hai mai voluto aggiungere un po' di brio alle immagini del tuo sito web? Parliamo di un tocco piccolo e professionale che rende il tuo sito più interattivo senza essere distraente.

Su WPBeginner, abbiamo scoperto che un semplice effetto di sfumatura al passaggio del mouse è una soluzione perfetta. È un'animazione sottile che incoraggia delicatamente i visitatori a interagire con i tuoi contenuti visivi.

Questa piccola modifica può fare una grande differenza nell'aspetto generale del tuo sito, ed è sorprendentemente facile da impostare. Non devi essere un esperto di codifica per farlo.

In questa guida, ti mostreremo esattamente come aggiungere l'effetto di sfumatura delle immagini al passaggio del mouse in WordPress.

Perché sfumare le immagini al passaggio del mouse in WordPress?

Le animazioni sono un modo semplice per rendere il tuo sito web più interessante e possono persino attirare l'attenzione del visitatore sui contenuti più importanti della tua pagina, come il logo del tuo sito web o una call to action.

Ci sono molti modi diversi per utilizzare le animazioni CSS in WordPress, ma aggiungere un effetto hover alle immagini è particolarmente efficace. L'animazione di sfumatura significa che le tue immagini appariranno o scompariranno lentamente quando i visitatori ci passeranno sopra il mouse.

Questo incoraggia le persone a interagire con le tue immagini e può persino aggiungere un elemento narrativo alla pagina. Ad esempio, immagini diverse potrebbero apparire e scomparire gradualmente mentre il visitatore si sposta sulla pagina.

A differenza di altre animazioni, l'effetto di dissolvenza dell'immagine al passaggio del mouse è sottile, quindi non influenzerà negativamente l'esperienza di lettura del visitatore o qualsiasi ottimizzazione delle immagini che hai effettuato.

Detto questo, ti mostreremo come aggiungere una dissolvenza alle tue immagini al passaggio del mouse in WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1: Aggiungere la dissolvenza delle immagini al passaggio del mouse a tutte le immagini di WordPress
• Metodo 2: Aggiungere animazioni di dissolvenza delle immagini a singole pagine
• Metodo 3: Aggiungere animazioni di dissolvenza delle immagini alle immagini in evidenza
• Domande frequenti (FAQ)
• Risorse aggiuntive per effetti e gestione delle immagini

Metodo 1: Aggiungere la dissolvenza delle immagini al passaggio del mouse a tutte le immagini di WordPress

Il modo più semplice per aggiungere un effetto di dissolvenza a tutte le tue immagini è utilizzare il plugin gratuito WPCode. È il plugin per snippet di codice più potente e facile da usare per WordPress, e ti consente di aggiungere codice personalizzato senza dover modificare i file del tuo tema.

Questo è molto più sicuro perché il plugin aiuta a prevenire errori che possono causare errori comuni di WordPress. Per maggiori dettagli su tutte le sue funzionalità, puoi leggere la nostra recensione completa di WPCode.

Suggerimento esperto: Su WPBeginner, utilizziamo WPCode per gestire tutti gli snippet di codice personalizzati nel nostro portafoglio di siti web. È un modo affidabile per aggiungere funzionalità e apportare modifiche in sicurezza senza mai modificare direttamente il file functions.php di un tema.

La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.

Qui vedrai tutti gli snippet WPCode pronti all'uso che puoi aggiungere al tuo sito. Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress di solito non supporta, disabilitare le pagine di allegato, e molto altro.

Passa semplicemente il mouse su ‘Aggiungi il tuo codice personalizzato’ e poi fai clic su ‘+ Aggiungi snippet personalizzato’ quando appare.

Per aggiungere CSS personalizzato a WordPress, devi selezionare ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Quindi, nella pagina successiva, digita un titolo per lo snippet di codice personalizzato.

Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella bacheca di WordPress.

Nell'editor di codice, aggiungi il seguente snippet di codice:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Questo snippet di codice farà svanire ogni immagine per 2 secondi quando l'utente ci passa sopra il mouse. Per far svanire l'immagine più lentamente, sostituisci semplicemente ‘2s ease’ con un numero maggiore. Se vuoi far svanire l'immagine più velocemente, usa ‘1s ease’ o un valore inferiore.

Puoi anche aumentare o diminuire l'‘opacità’ modificando la riga opacity:0.6.

Se modifichi uno di questi numeri, assicurati di modificarli in tutte le proprietà (webkit, moz, ms e o) in modo che l'effetto di dissolvenza appaia uguale su ogni browser.

Quando sei soddisfatto dello snippet, scorri fino alla sezione ‘Inserimento’. WPCode può aggiungere il tuo codice in diverse posizioni, come dopo ogni post, solo frontend, o solo admin.

Per aggiungere un effetto dissolvenza a tutte le tue immagini, fai clic su ‘Inserimento automatico’ se non è già selezionato. Quindi, apri il menu a discesa ‘Posizione’ e scegli ‘Intestazione sito’.

Dopodiché, sei pronto per scorrere fino in cima allo schermo e fare clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.

Infine, fai clic su ‘Salva snippet’ per rendere attivo lo snippet CSS.

Ora, se passi il mouse sopra qualsiasi immagine sul tuo sito web WordPress, vedrai l'effetto dissolvenza in azione.

Metodo 2: Aggiungere animazioni di dissolvenza delle immagini a singole pagine

L'uso di un effetto dissolvenza per ogni singola immagine può diventare distraente, specialmente se hai una galleria fotografica sul tuo sito, un negozio di immagini stock o qualsiasi altro sito che abbia molte immagini.

Tenendo conto di ciò, potresti voler utilizzare gli effetti dissolvenza solo su una pagina o un post specifico.

La buona notizia è che WPCode ti consente di creare shortcode personalizzati. Puoi inserire questo shortcode in qualsiasi pagina e WordPress mostrerà gli effetti dissolvenza solo su quella pagina.

Per fare ciò, crea semplicemente uno snippet di codice personalizzato e aggiungi il codice di animazione dissolvenza seguendo lo stesso processo descritto sopra. Quindi, fai clic sul pulsante ‘Salva snippet’.

Dopodiché, scorri fino alla sezione ‘Inserimento’, ma questa volta seleziona ‘Shortcode’.

Questo crea uno shortcode che puoi aggiungere a qualsiasi pagina, post o area pronta per i widget.

Dopodiché, procedi e rendi attivo lo snippet seguendo lo stesso processo descritto sopra.

Ora puoi andare su qualsiasi pagina, post o area pronta per i widget e creare un nuovo blocco ‘Shortcode’. Quindi, incolla semplicemente lo shortcode WPCode in quel blocco.

Per maggiori informazioni su come posizionare lo shortcode, consulta la nostra guida su come aggiungere uno shortcode in WordPress.

Fatto ciò, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per rendere attivo lo shortcode. Puoi quindi visitare quella pagina, pagina o area pronta per i widget per vedere l'effetto dissolvenza al passaggio del mouse.

Metodo 3: Aggiungere animazioni dissolvenza alle immagini in Immagini in Evidenza

Un'altra opzione è aggiungere animazioni di dissolvenza alle tue immagini in evidenza o miniature dei post. Queste sono le immagini principali del post.

Dissolvendo le immagini in evidenza al passaggio del mouse, puoi rendere il tuo sito più accattivante e coinvolgente senza animare ogni singola immagine nel tuo blog WordPress o sito web.

Per aggiungere un'animazione di dissolvenza alle miniature dei tuoi post, crea semplicemente un nuovo frammento di codice personalizzato seguendo lo stesso processo descritto sopra.

Questa volta, tuttavia, aggiungi il seguente codice all'editor:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Successivamente, scorri fino alla casella 'Inserimento' e seleziona 'Inserimento automatico'.

Quindi, apri il menu a discesa ‘Posizione’ e scegli ‘Intestazione sito’.

Successivamente, puoi procedere e rendere attivo il frammento di codice utilizzando lo stesso processo descritto sopra.

Ora, puoi passare il mouse sopra qualsiasi immagine in evidenza per vedere l'animazione di dissolvenza in azione.

Se desideri aggiungere ancora più effetti di mouseover delle immagini, consulta la nostra guida su come aggiungere effetti di hover delle immagini in WordPress.

Domande frequenti (FAQ)

Ecco le risposte ad alcune delle domande più frequenti che riceviamo sull'aggiunta di effetti di hover delle immagini in WordPress.

L'aggiunta di un effetto di dissolvenza rallenterà il mio sito web?

No, questo effetto di dissolvenza basato su CSS non dovrebbe rallentare in modo percettibile il tuo sito web. Il codice utilizza semplici transizioni CSS, che sono molto leggere e ottimizzate dai moderni browser web.

Questo metodo è molto più efficiente rispetto all'utilizzo di JavaScript o di grandi librerie di animazione per un effetto così semplice.

Come applico l'effetto di dissolvenza a una singola immagine specifica?

Per selezionare una singola immagine, puoi assegnarle una classe CSS personalizzata. Innanzitutto, seleziona il blocco immagine nell'editor e trova il pannello 'Avanzate' nelle impostazioni del blocco sulla destra.

Nel campo 'Classi CSS aggiuntive', aggiungi un nome univoco come custom-fade-image. Quindi, modifica il tuo snippet WPCode per selezionare specificamente questa classe, in questo modo:
img.custom-fade-image:hover { ... }.

L'effetto di dissolvenza dell'immagine al passaggio del mouse funziona sui dispositivi mobili?

L'azione 'mouseover' o 'hover' è specifica per gli utenti desktop con un cursore del mouse. Questo effetto non si attiverà sui dispositivi touch come smartphone o tablet perché non c'è un cursore su cui passare sopra le immagini.

Tuttavia, il codice non causerà alcun problema sui dispositivi mobili. Le tue immagini verranno semplicemente visualizzate normalmente senza l'animazione di dissolvenza.

Posso usare altri effetti di animazione oltre alla dissolvenza?

Sì, assolutamente. La dissolvenza è solo una delle tante possibilità che puoi ottenere con il CSS.

Puoi creare effetti come zoom, scorrimento, scala di grigi o applicare sovrapposizioni. Per ulteriori idee ed esempi di codice, consulta la nostra guida dettagliata su come aggiungere effetti di hover sulle immagini in WordPress.

Risorse aggiuntive per effetti e gestione delle immagini

Un semplice dissolvenza è un ottimo inizio, ma ci sono molti altri modi per rendere le tue immagini più coinvolgenti. Se desideri esplorare opzioni più avanzate, ecco alcune delle nostre altre guide sugli effetti e sulla gestione delle immagini:

• Come aggiungere filtri fotografici simili a Instagram in WordPress (Passo dopo passo)
• Come mostrare foto prima e dopo in WordPress (con effetto slide)
• Come aggiungere il blocco del tasto destro alle immagini di WordPress
• Come creare immagini interattive in WordPress
• Come aggiungere facilmente immagini interattive a 360 gradi in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come dissolvere le immagini al passaggio del mouse in WordPress. Potresti anche voler consultare la nostra guida su come organizzare i file di WordPress nelle cartelle della libreria multimediale e le nostre scelte di esperti dei migliori plugin e strumenti per le immagini in primo piano per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.