Effetto Hover Riflesso su Immagine con CSS: Guida Completa

Tra gli effetti visivi più accattivanti per un sito web troviamo l’effetto riflesso su immagine, visibile solo quando l’utente passa il cursore (hover) sopra l’immagine stessa. Questo piccolo dettaglio può dare un tono moderno e professionale al tuo design, migliorando l’impatto visivo e l’UX complessiva.

In questa guida imparerai a:

• Strutturare il markup HTML di base per ospitare l’immagine.
• Applicare lo stile CSS per generare automaticamente un riflesso sotto l’immagine in hover, senza ricorrere a JavaScript.
• Aggiungere transizioni fluide per un risultato ancora più piacevole.

1. Struttura HTML di Base

Per prima cosa, creiamo un semplice contenitore per l’immagine.

<div class="image-reflect-container">
  <img src="tua-immagine.jpg" alt="Immagine con Effetto Riflesso" />
</div>

• .image-reflect-container: wrapper che useremo per posizionare il nostro “riflesso” con CSS.

2. CSS per l’Effetto Riflesso

Useremo un pseudo-elemento ::after che riproduce l’immagine capovolta e con un leggero gradiente sfumato, il tutto visibile solo in hover.

.image-reflect-container {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.image-reflect-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pseudo-elemento per il riflesso */
.image-reflect-container::after {
  content: "";
  position: absolute;
  top: 100%; /* Si posiziona subito sotto l'immagine */
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("tua-immagine.jpg"); /* Stessa immagine dell’elemento principale */
  background-repeat: no-repeat;
  background-size: cover; /* Adatta l’immagine alla stessa dimensione di sopra */
  transform: scaleY(-1); /* Capovolge verticalmente l'immagine */
  opacity: 0;           /* Di base il riflesso non è visibile */
  pointer-events: none; /* Non intercetta il mouse */
  transition: opacity 0.3s ease-in-out;
  
  /* Aggiungiamo una sfumatura in trasparenza per l’effetto fade-out */
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* Mostra il riflesso con hover */
.image-reflect-container:hover::after {
  opacity: 0.6; /* Regola l’intensità del riflesso */
}

Come funziona il riflesso

• transform: scaleY(-1) capovolge l’immagine lungo l’asse orizzontale, creando l’effetto “specchio”.
• opacity: 0 di default la rende trasparente, per farla apparire soltanto in hover.
• mask-image (o -webkit-mask-image) crea una sfumatura che fa svanire lentamente il riflesso, rendendo l’effetto più realistico.

Nota di compatibilità: L’uso di mask-image o -webkit-mask-image è supportato soprattutto dai browser moderni. Se serve compatibilità con browser più datati, si può usare una soluzione basata su linear-gradient come overlay.

3. Personalizzazioni e Miglioramenti

• Durata animazione: Modifica transition: opacity 0.3s per rendere più breve o più lunga l’animazione di comparsa del riflesso.
• Intensità del riflesso: Gioca con opacity in hover (es. 0.3, 0.5, 0.8) per un effetto più o meno marcato.
• Dimensioni contenitore: Se l’immagine è molto grande, assicurati di aver impostato correttamente background-size: cover o contain per adattare le proporzioni.

4. Vantaggi dell’Effetto Hover Riflesso

• Zero JavaScript: È un effetto interamente gestito dal CSS, senza ulteriori overhead di script.
• Focalizzazione dell’attenzione: L’utente è attratto dal dettaglio, con maggiore probabilità di interazione.
• Impatto visivo: Dona un look moderno e professionale.

Conclusione

L’effetto hover con riflesso su immagine è un piccolo ma potente miglioramento estetico, ideale per gallerie fotografiche, portfolio o e-commerce. Con pochissime righe di CSS, puoi stupire i visitatori con un effetto dinamico ed elegante, e il tutto senza utilizzare JavaScript.
Prova ad aggiungere questo snippet al tuo progetto e goditi l’impatto visivo sul tuo layout!

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.