Un effetto che potremmo voler creare in un sito web è un rollover su una immagine che mostri un bottone o un testo sopra all’immagine stessa. Insomma un overlay sull’immagine, una sovrapposizione che appaia al passaggio del mouse.
In questo tutorial ti mostrerò come farlo in modo molto semplice. Utilizzerò il tema Divi, ma l’effetto di rollover sull’immagine è realizzato con i css, quindi puoi utilizzarlo su qualsiasi tema o sito web.
Non ho trovato tutorial in italiano per l’effetto rollover su immagini con Divi, per cui ho pensato di tradurre un tutorial in inglese che ho trovato, di cui estrapolerò solo le parti che mi interessano per semplificare il più possibile.
In questo tutorial vedremo come inserire:
- un pulsante sopra ad una immagine che appaia al passaggio del mouse
- un testo sopra ad una immagine che appaia al passaggio del mouse
Che cosa ti serve per editare il CSS
In questo tutorial useremo un blocco di codice css personalizzato, che dovrai inserire nel sito web.
Se lavori in WordPress ti consiglio di inserire il tuo codice css personalizzato nel file style.css di un tema child, cioè un tema creato ad hoc che contiene solo i file necessari per fare le tue personalizzazioni. Se non sai cos’è un tema child e come crearlo puoi seguire questo tutorial.
In alternativa, se usi Divi, puoi aggiungere css personalizzato qui: Divi>Opzioni tema>CSS personalizzato.
Oggi WordPress permette di inserire css personalizzato indipendentemente dal tema attivato. Ti basta andare su Aspetto > Personalizza > Css aggiuntivo.
Puoi fare come ti trovi meglio, io lavoro molto più agevolmente con il file style.css del tema child.
Inserire un pulsante su una immagine che appare al passaggio del mouse
Ora ti indicherò i passaggi da fare se vuoi mostrare un pulsante su una immagine al passaggio del mouse, cioè in rollover. Questo è il risultato che otterrai:
Per prima cosa, inserisci la tua immagine e sotto crea un pulsante. Se usi Divi, entrambi gli elementi dovranno essere nella stessa colonna.
Ora dovrai aggiungere una classe css alla colonna che contiene l’immagine ed il pulsante (questo se usi Divi, altrimenti aggiungerai la classe al div che contiene pulsante e immagine). Useremo il seguente nome per la classe: “pa-button-over-image“.
Se stai creando un sito in HTML devi applicare la classe al div in questo modo:
<div class="pa-button-over-image"> ...contenuto del DIV, cioè l'immagine e il pulsante </div>Se invece stai usando il tema Divi, devi editare le opzioni della colonna e su “Avanzate” inserire il nome della classe su “CSS ID & Classes toggle”:
Ora dovrai aggiungere il codice Css al tuo sito, o nel file style.css del tema child, oppure con i metodi che ti ho spiegato più su in questo articolo.
Ecco il codice css da inserire:
/*posiziono il modulo del pulsante al centro del modulo dell'immagine e sopra di esso*/
.pa-button-over-image > .et_pb_button_module_wrapper {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
transition: opacity 0.3s ease-in-out;
opacity: 0; /*senza passaggio del mpuse l'opacità del pulsante è a zero, cioè è invisibile*/
}
/*imposto un overlay all'immagine, una trasparenza*/
.pa-button-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0; /*senza passaggio del mouse l'overlay è invisibile*/
}
/*mostro il bottone al passaggio del mouse sull'immagine*/
.pa-button-over-image:hover > .et_pb_button_module_wrapper {
opacity: 1;
}
/*mostro anche l'overlay all'immagine*/
.pa-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
opacity: 0.3;
}
Se non stai utilizzando Divi, devi modificare i nomi delle classi css dell’immagine trovando quali sono nel tuo caso, o applicandoli a mano nell’HTML.
Potresti anche voler aggiustare la trasparenza dell’overlay oppure la posizione del pulsante modificando il parametro “top: 45%;” se non risulta centrato in altezza.
Inserire un testo su una immagine che appare al passaggio del mouse
Se invece del pulsante vuoi far apparire un testo al rollover sull’immagine, il concetto è identico, ma dovrai applicarlo a un testo anziché a un pulsante. Ecco come fare.
Prima di tutto crea la tua immagine e il tuo testo in una stessa colonna (o in uno stesso div se non usi il tema Divi).
Ora dovrai aggiungere una classe css alla colonna che contiene l’immagine ed il testo (questo se usi Divi, altrimenti aggiungerai la classe al div che contiene testo e immagine). Useremo il seguente nome per la classe: “pa-text-over-image“.
Se stai creando un sito in HTML devi applicare la classe al div in questo modo:
<div class="pa-text-over-image"> ...contenuto del DIV, cioè l'immagine e il testo </div>Se invece stai usando il tema Divi, devi editare le opzioni della colonna e su “Avanzate” inserire il nome della classe su “CSS ID & Classes toggle”:
Ora dovrai aggiungere il codice Css al tuo sito, o nel file style.css del tema child, oppure con i metodi che ti ho spiegato più su in questo articolo.
Ecco il codice css da inserire:
/*posiziono il testo sopra all'immagine*/
.pa-text-over-image > .et_pb_text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
opacity: 0; /*con opacità a zero il testo all'inizio è invisibile*/
}
/*insierisco un overlay opzionale sopra all'immagine*/
.pa-text-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
/*mostro il testo al passaggio del mouse*/
.pa-text-over-image:hover > .et_pb_text {
opacity: 1;
}
/*mostro l'overlay al passaggio del mouse*/
.pa-text-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
opacity: 0.5;
}Anche in questo caso, se non stai utilizzando il tema Divi, devi modificare i nomi delle classi css dell’immagine trovando quali sono nel tuo caso, o applicandoli a mano nell’HTML.
Potresti anche voler aggiustare la trasparenza dell’overlay oppure la posizione del testo modificando il parametro “top: 45%;” se il testo non risulta centrato in altezza.
Ecco il risultato che otterrai al passaggio del mouse:
Puoi usare questo sistema anche per far apparire al rollover un altro div o un altro contenuto. Puoi anche personalizzare il css in modo che sia sempre presente il testo o il pulsante sopra all’immagine, senza farlo apparire solo al passaggio del mouse.
In tal caso il codice css sarà simile a questo:
/*posiziono il testo sopra all'immagine*/
.pa-text-over-image > .et_pb_text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
opacity: 1; /*con opacità a 1 il testo è sempre presente*/
}
/*insierisco un overlay opzionale sopra all'immagine*/
.pa-text-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.3; /*l'overlay sarà sempre visibile in trasparenza*/
}
/*il resto del codice css va tolto*/
E il gioco è fatto! Scrivimi nei commenti se questo tutorial ti è risultato utile e se ne vuoi altri di questo genere.
