Come aggiungere un effetto di ombra (box-shadow) che appare al passaggio del mouse sulle immagini in modalità scura

 

Per aggiungere un effetto di ombra (box-shadow) che appare al passaggio del mouse sulle immagini in modalità scura, puoi estendere il selettore :hover inserendo la proprietà dedicata e integrandola nella 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à box-shadow:Aggiornamento CSS.

Aggiorna il blocco CSS della modalità scura aggiungendo box-shadow sia alle transizioni che allo stato :hover (utilizzando una combinazione di ombra scura e un leggero alone chiaro per dare profondità sullo sfondo scuro):

CSS

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

[data-theme="dark"] img:hover {
  filter: none;
  transform: scale(1.03);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.08);
}

Nota: Questa combinazione crea un effetto tridimensionale elegante, facendo risaltare l'immagine rispetto al resto della pagina scura.

Verifica: Il codice CSS viene aggiornato correttamente all'interno del tag <style> 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, si ingrandisce leggermente e si solleva visivamente grazie all'ombra circostante.