HTML e CSS

Card con transizione morbida

Scheda che cambia ombra, bordo e sfondo al passaggio del mouse senza spostamenti eccessivi.

Quando si usa

Quando vuoi rendere una scheda più riconoscibile al passaggio del mouse, per esempio in un elenco di articoli, corsi, servizi o prodotti.

Perché si usa

Una transizione leggera comunica interattività senza creare movimenti fastidiosi. Il contenuto resta fermo e cambia solo l'aspetto visivo.

Vantaggi principali

Hover elegante e non invadente
Nessuno spostamento verticale della card
Adatta a home page, categorie e pagine elenco

Anteprima del risultato

Passando il mouse sulla card si evidenziano bordo, ombra e sfondo.

Novità

Corso di esempio

Una scheda semplice che diventa più evidente quando l'utente la esplora.

Codice completo

Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.

<article class="card-transizione">
  <span>Novità</span>
  <h3>Corso di esempio</h3>
  <p>Descrizione sintetica della scheda.</p>
</article>

<style>
.card-transizione{
  border:1px solid #d8e1ec;
  border-radius:16px;
  padding:22px;
  background:#fff;
  box-shadow:0 5px 18px rgba(20,45,75,.08);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card-transizione:hover,
.card-transizione:focus-within{
  border-color:#2463a9;
  background:#f8fbff;
  box-shadow:0 12px 28px rgba(20,45,75,.16);
}
.card-transizione span{color:#2463a9;font-weight:700}
</style>

Da personalizzare: Colori, raggio degli angoli, intensità dell'ombra e contenuti della scheda.

Errore da evitare: Non animare proprietà pesanti o creare movimenti troppo ampi: l'hover deve aiutare, non distrarre.