Come aggiungere anche un leggero effetto di zoom al passaggio del mouse sulle immagini in modalità scura.

Per aggiungere un leggero effetto di zoom al passaggio del mouse sulle immagini in modalità scura, combinandolo con il ripristino della luminosità, puoi utilizzare la proprietà CSS transform: scale() insieme a una transizione fluida.

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 la proprietà di trasformazione e zoom:Aggiornamento CSS.

Aggiorna il blocco CSS della modalità scura per includere la transizione e l'effetto di ingrandimento (scale) sul selettore :hover:

CSS

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

[data-theme="dark"] img:hover {
  filter: none;
  transform: scale(1.03); /* Leggero zoom del 3% */
}

Nota: Il valore 1.03 crea un ingrandimento discreto ed elegante. Se preferisci uno zoom più evidente, puoi aumentarlo a 1.05.

Verifica: Il codice CSS viene aggiornato 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 sopra un'immagine.

Verifica: L'immagine si illumina tornando alla luminosità originale e si ingrandisce leggermente in modo fluido.