Immagine opacizzata con il passaggio mouse si illumina

  • antoninowdw

    (@antoninowdw)


    8 anni, 8 mesi fa

    Ciao a tutti ho un immagine opacizzata in cui c’ è una barca e accanto un macchina, volevo creare questa immagine come home page e quindi se volevo andare su macchina si accendeva l auto dell immagine e viceversa se andavo sulla barca si illumina solo la barca , io ho 3 immagini la prima è quella opaca le altre due è la stessa immagine ma è solo colorato o la macchina o la barca. Come posso attivare questa procedura? Grazie

Stai visualizzando 3 risposte - dal 1 al 3 (di 3 totali)
  • Ljuba Daviè

    (@ljuba_davie)

    8 anni, 8 mesi fa

    Ciao Antonino, io ti consiglio di scomporre la tua immagine che contiene barca + auto in due immagini separate: una con la barca e l’altra con l’auto. In questo modo sarà molto più semplice impostare l’hover al passaggio del mouse su una delle due immagini.

    Dovrai quindi definire due div in cui andrai a inserire le immagini come background.

    Per esempio, se definisci un div <div class="test"></div> poi nei css dovrai inserire il seguente codice:

    .test {background:url(immagine-opaca.jpg);}
.test:hover {background:url(immagine-colorata.jpg);}
    Ljuba Daviè

    (@ljuba_davie)

    8 anni, 8 mesi fa

    Dimenticavo una cosa molto importante Antonino: prima di fare qualsiasi modifica a style.css assicurati di avercreato un child theme altrimenti al primo aggiornamento del tuo tema perderesti tutte le tue personalizzazioni.
    Qui trovi una guida: child theme

    Chi ha creato la discussione antoninowdw

    (@antoninowdw)

    8 anni, 8 mesi fa

    Ok ti ringrazio del consiglio metterò in atto il tuo suggerimento. Appena posso vi tengo aggiornati. Ciao grazie

Stai visualizzando 3 risposte - dal 1 al 3 (di 3 totali)
  • Il topic ‘Immagine opacizzata con il passaggio mouse si illumina’ è chiuso a nuove risposte.