Come fare in modo che l'immagine ritorni a piena luminosità quando il cursore del mouse ci passa sopra in modalità scura

Per fare in modo che l'immagine ritorni a piena luminosità quando il cursore del mouse ci passa sopra in modalità scura, è sufficiente aggiungere una regola CSS per lo stato :hover all'interno del selettore dedicato.

1.Apri l'editor HTML del tema:Accesso al codice.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Verifica: L'editor del codice sorgente del blog risulta aperto.

2.Aggiungi il selettore al passaggio del mouse:Regola CSS Hover.

Individua il blocco CSS della modalità scura che avevi inserito in precedenza e aggiungi la regola per il passaggio del mouse (:hover):

CSS

[data-theme="dark"] img {
  filter: brightness(0.85) contrast(0.9);
  transition: filter 0.3s ease;
}

/* Riporta l'immagine a luminosità normale al passaggio del mouse */
[data-theme="dark"] img:hover {
  filter: none;
}

Nota: Usando filter: none; l'immagine recupera istantaneamente i suoi colori e la sua luminosità originale, mentre la proprietà transition (già presente sull'immagine) assicura che il ritorno avvenga in modo fluido.

Verifica: Il blocco CSS viene aggiunto correttamente senza errori di sintassi.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche, apri il blog in modalità scura e posiziona il cursore del mouse sopra un'immagine.

Verifica: L'immagine si illumina tornando ai colori originali non appena il cursore la raggiunge