Se vuoi dare un tocco di stile e interattività al tuo sito, gli effetti di testo al passaggio del mouse (hover) sono la scelta perfetta. Di seguito trovi una raccolta di mini-tutorial con HTML e CSS già pronti, che ti permetteranno di testare svariati effetti: dal semplice cambio colore fino a glitch più audaci.
1. Effetto Base: Cambio Colore
Un classico intramontabile: al passaggio del mouse, il colore del testo cambia in modo graduale. È l’effetto più semplice e si realizza in pochissime righe di codice.
HTML
<span class="text-hover-base">Hover su di me!</span>CSS
.text-hover-base {
color: #333;
transition: color 0.3s ease;
}
.text-hover-base:hover {
color: #e74c3c; /* Rosso vivace */
}Come funziona
La proprietà transition permette di far cambiare il colore del testo gradualmente quando il mouse passa sopra l’elemento.
2. Effetto Evidenziatore (Highlight)
Questo effetto simula un “evidenziatore” che compare sotto il testo durante l’hover. È perfetto per dare risalto a parole o frasi specifiche.
HTML
<span class="text-highlight">Evidenziami!</span>CSS
.text-highlight {
position: relative;
color: #333;
}
/* Barra colorata sotto il testo */
.text-highlight::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 0.2em;
width: 100%;
background-color: yellow;
z-index: -1;
transition: transform 0.3s ease;
transform: scaleX(0);
transform-origin: left center;
}
/* Al passaggio del mouse, la barra si "espande" */
.text-highlight:hover::before {
transform: scaleX(1);
}Come funziona
Uno pseudo-elemento ::before viene utilizzato come barra colorata. Con la proprietà transform: scaleX() si crea un’animazione dall’ampiezza zero fino al 100% dell’elemento.
3. Effetto Zoom sul Testo
Leggermente più d’impatto, l’effetto zoom fa “lievitare” il testo al passaggio del mouse, sottolineandone l’importanza.
HTML
<span class="text-zoom">Zoom su di me!</span>CSS
.text-zoom {
display: inline-block; /* Necessario per permettere transform */
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.text-zoom:hover {
transform: scale(1.2);
}Come funzionascale(1.2) aumenta le dimensioni del testo del 20%. Il display: inline-block; è fondamentale per permettere la trasformazione sull’elemento in linea.
4. Effetto Gradiente al Passaggio del Mouse
Un gradiente animato che si muove orizzontalmente: elegante e perfetto per dare un tocco di modernità.
HTML
<span class="text-gradient-hover">Gradient Hover</span>
CSS
.text-gradient-hover {
/* Gradiente orizzontale */
background: linear-gradient(90deg, #3498db, #9b59b6);
/* Ritaglia il gradiente all'area del testo */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Effetto di “movimento” orizzontale del gradiente */
background-size: 200%;
background-position: -100% 0;
transition: background-position 0.5s;
}
.text-gradient-hover:hover {
background-position: 0 0;
}Come funziona
Grazie a -webkit-background-clip: text, il testo diventa trasparente e mostra il gradiente di sfondo. La proprietà background-position passa da -100% a 0 creando l’animazione.
5. Effetto Onde (Wavy)
Un’animazione periodica fa “ondeggiare” il testo se il mouse rimane sull’elemento, simulando un movimento continuo su e giù.
HTML
<span class="text-wavy">Ondeggia!</span>CSS
.text-wavy {
display: inline-block;
position: relative;
transition: transform 0.3s ease;
}
/* Al passaggio del mouse, si avvia l’animazione di “ondeggiamento” */
.text-wavy:hover {
animation: wave 1s infinite;
}
@keyframes wave {
0% { transform: translateY(0); }
25% { transform: translateY(-5px); }
50% { transform: translateY(0); }
75% { transform: translateY(5px); }
100% { transform: translateY(0); }
}Come funziona
L’animazione wave viene riprodotta all’infinito quando il cursore è sopra il testo, creando un effetto ondulato.
6. Effetto Glitch Light
Ricrea un leggero glitch stile “errore di canale” nei colori, regalando un aspetto decisamente futuristico.
HTML
<span class="text-glitch">Glitchami!</span>CSS
.text-glitch {
position: relative;
transition: color 0.1s, text-shadow 0.1s;
}
.text-glitch:hover {
color: #ff0000;
text-shadow:
2px 0 #00ffec,
-2px 0 #ff00ff;
}
Come funziona
Si applica un text-shadow con colori a contrasto (ciano e magenta) che, sovrapposti al testo colorato di rosso, crea un effetto di distorsione visiva.
7. Pagina Demo Completa
Se desideri testare subito tutti gli effetti, ecco una pagina HTML di esempio. Basta incollare il seguente codice in un file (ad esempio index.html) e verificare che il CSS sia incluso nello stesso file o in uno esterno (style.css).
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Effetti Testo Hover</title>
<style>
/* 1. Effetto Base */
.text-hover-base {
color: #333;
transition: color 0.3s ease;
}
.text-hover-base:hover {
color: #e74c3c;
}
/* 2. Evidenziatore */
.text-highlight {
position: relative;
color: #333;
}
.text-highlight::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 0.2em;
width: 100%;
background-color: yellow;
z-index: -1;
transition: transform 0.3s ease;
transform: scaleX(0);
transform-origin: left center;
}
.text-highlight:hover::before {
transform: scaleX(1);
}
/* 3. Zoom */
.text-zoom {
display: inline-block;
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.text-zoom:hover {
transform: scale(1.2);
}
/* 4. Gradiente */
.text-gradient-hover {
background: linear-gradient(90deg, #3498db, #9b59b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200%;
background-position: -100% 0;
transition: background-position 0.5s;
}
.text-gradient-hover:hover {
background-position: 0 0;
}
/* 5. Wavy */
.text-wavy {
display: inline-block;
position: relative;
transition: transform 0.3s ease;
}
.text-wavy:hover {
animation: wave 1s infinite;
}
@keyframes wave {
0% { transform: translateY(0); }
25% { transform: translateY(-5px); }
50% { transform: translateY(0); }
75% { transform: translateY(5px); }
100% { transform: translateY(0); }
}
/* 6. Glitch Light */
.text-glitch {
position: relative;
transition: color 0.1s, text-shadow 0.1s;
}
.text-glitch:hover {
color: #ff0000;
text-shadow:
2px 0 #00ffec,
-2px 0 #ff00ff;
}
</style>
</head>
<body>
<h1>Effetti di Testo al Passaggio del Mouse (Hover)</h1>
<h2 class="text-hover-base">1. Effetto Base</h2>
<h2 class="text-highlight">2. Evidenziatore</h2>
<h2 class="text-zoom">3. Zoom</h2>
<h2 class="text-gradient-hover">4. Gradiente</h2>
<h2 class="text-wavy">5. Wavy</h2>
<h2 class="text-glitch">6. Glitch Light</h2>
</body>
</html>Conclusioni
Con poche proprietà come transition, transform e text-shadow, puoi dare nuova vita ai tuoi contenuti. Gli effetti hover sono un’ottima soluzione per mettere in risalto call-to-action, titoli o link. Per rendere i tuoi progetti ancora più unici, potresti provare ad aggiungere pseudo-elementi, filtri CSS (come blur, hue-rotate o brightness) o perfino animazioni più complesse realizzate con JavaScript.
Buon divertimento e… fai risaltare il tuo testo!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
