Salve a tutti ragazzi, sono nuovo del forum e sono un novizio anche del mondo web e in particolare di html e css. Tempo fa ho frequentato un corso relativo alla creazione di pagine web e, alla fine di questo, ho deciso di creare un mio sito, attualmente in costruzione.
Il CMS che utilizzo è wordpress, mentre il tema è DIVI, un tema premium. In una delle pagine del sito, vorrei aggiungere due immagini sulle quali, una volta andati sopra con il mouse, dovrebbe uscire una scritta che invita a cliccare e si viene reindirizzati ad un'altra pagine. Ho così aggiunto l'elemento immagine e, tra le varie opzioni che questo tema offre, c'è la possibilità di rendere cliccabile quest'immagine, e si può aggiungere anche un effetto hover, che però permette soltanto di scegliere un colore che si deve sovrapporre a quest'immagine e un'icona, ma non una scritta.
Allora ho optato per un'altra soluzione: ho creato io un'immagine con sfondo trasparente ed una scritta al centro, dopodichè ho creato la seguente regola css:

.overlayhome:after{
position: absolute;
content: '';
background: url(nomesito/Riquadro.png);
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity:0;
transition: .5s ease all;
}

.overlayhome:hover:after{
opacity:1;
}

In pratica ora all'immagine di partenza ho associato questa regola scritta sopra, e quindi quell'immagine a sfondo trasparente normalmente non si vede, ma quando ci vado sopra con il mouse, diventa visibile(praticamente è come se adesso fossero un'immagine sopra l'altra). In questo modo però non ho più la possibilità di cliccarci sopra in quanto l'immagine principale sta sotto e quindi viene coperta dall'altra a sfondo trasparente, non cliccabile. Io vorrei invece rendere cliccabile quella di sopra.

Spero di essere riuscito a spiegarmi e vi chiedo, è possibile fare ciò in qualche modo?
Se aggiungessi un'altra regola CSS del tipo .overlayhome:hover:active?