Gli effetti hover sono tra gli strumenti più semplici e potenti per migliorare l”interattività percepita di un sito web. Un pulsante che cambia colore, una card che si solleva, un”immagine che si ingrandisce: sono piccoli dettagli che fanno la differenza nell”esperienza utente. In questa guida completa vediamo come creare effetti hover per i blocchi Gutenberg usando solo CSS, con esempi pratici e tecniche avanzate.
L”importanza degli effetti hover nell”UX
Gli effetti hover hanno un impatto fondamentale sull”esperienza utente:
- Feedback visivo immediato: l”utente capisce che l”elemento è interattivo
- Percezione di qualità: un sito con effetti hover curati sembra più professionale
- Guidano l”utente: gli hover effect suggeriscono dove cliccare
- Coinvolgimento: rendono l”esplorazione del sito più divertente
I migliori effetti hover per Gutenberg
1. Sollevamento (Lift)
L”effetto più comune e apprezzato. La card o il pulsante si solleva leggermente al passaggio del mouse, creando un effetto 3D sottile.
.hover-lift {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}2. Bordo animato
Un bordo che si anima al passaggio del mouse. Puoi animare la posizione, la larghezza o il colore del bordo.
.hover-bordo {
position: relative;
}
.hover-bordo::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #00c7b1;
transition: width 0.3s ease;
}
.hover-bordo:hover::after {
width: 100%;
}3. Ingrandimento immagine (Zoom)
Perfetto per gallerie, card prodotto e portfolio. L”immagine si ingrandisce leggermente all”hover.
.hover-zoom {
overflow: hidden;
border-radius: 12px;
}
.hover-zoom img {
transition: transform 0.4s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
.hover-zoom:hover img {
transform: scale(1.08);
}4. Sfondo che si illumina
Un effetto elegante per card e sezioni: lo sfondo cambia gradualmente colore.
.hover-sfondo {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
padding: 20px;
border-radius: 12px;
}
.hover-sfondo:hover {
background-color: #f0fdfa;
box-shadow: 0 4px 20px rgba(0, 199, 177, 0.08);
}5. Sottolineatura animata per link
.hover-link {
text-decoration: none;
position: relative;
display: inline-block;
}
.hover-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: #00c7b1;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.hover-link:hover::after {
width: 100%;
}6. Flip 3D card
Un effetto spettacolare per card che rivelano informazioni sul retro.
.hover-flip {
perspective: 1000px;
}
.hover-flip-inner {
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.hover-flip:hover .hover-flip-inner {
transform: rotateY(180deg);
}
.hover-flip-front, .hover-flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.hover-flip-back {
transform: rotateY(180deg);
}7. Rivelazione circolare
Un cerchio che si espande dal cursore rivelando il contenuto sottostante.
.hover-circle {
position: relative;
overflow: hidden;
}
.hover-circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 199, 177, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.hover-circle:hover::before {
width: 300%;
height: 300%;
}8. Scurimento graduale
.hover-darken {
position: relative;
overflow: hidden;
}
.hover-darken::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
}
.hover-darken:hover::after {
background: rgba(0, 0, 0, 0.3);
}
/* Testo che appare al centro */
.hover-darken .testo-hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
color: white;
}
.hover-darken:hover .testo-hover {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}Best practice per gli effetti hover
- Usa transition su transform e opacity: sono le proprietà più performanti
- Durata ottimale: 0.2-0.4 secondi è il range ideale per la maggior parte degli effetti
- Easing curve: cubic-bezier(0.34, 1.56, 0.64, 1) per un effetto “rimbalzino” naturale
- Non esagerare: 2-3 tipi di hover ben fatti valgono più di 10 effetti diversi
- Mobile: ricorda che sui dispositivi touch non esiste hover. Gli effetti devono funzionare anche con tap
Applicare gli hover ai blocchi Gutenberg
Basta aggiungere le classi CSS sopra al tema, poi nei blocchi Gutenberg inserisci la classe desiderata nel campo “Classe CSS aggiuntiva”. Il blocco reagirà al passaggio del mouse.
Con ClassyBlocks Pro puoi applicare 12 effetti hover già pronti con un click direttamente nell”editor Gutenberg, con preview live e zero configurazioni CSS.
