Ciao a tutti, avrei bisogno del vostro supporto per un problema.

Ho delle immagini sulle quali ho realizzato un effetto zoom + filtro brightness al passaggio del mouse (ovviamente allo scopo di evidenziare l'area dove passa il mouse).

Ora, oltre agli effetti zoom e brightness di cui sopra, vorrei aggiungere anche un bordo (interno) che aumento al passaggio del mouse.

Così ho usate la funzione outline e outline-offset, ma si verifica un problema: il bordo "aumentato" si vede solo per una frazione di secondo, per poi sparire subito.

Penso che dipenda dal fatto che gli effetti zoom e brightness hanno una transizione di 0.3secondi, mentre il bordo è "immediato".

Pertanto per una sola frazione di secondo si vede il bordo, ma poi sparisce subito, dal momento che viene "coperto" dalla transizione sopra citata.

Vi viene in mente un modo per risolvere?

Di seguito il codice CSS che sto utilizzando.

Grazie!

codice:
.link .immagine_griglia {
vertical-align: middle;
transition: transform .3s ease, filter .3s ease-in-out;
filter: brightness(100%);
outline: solid 1px #888;
outline-offset: -1px;
}


.link:hover .immagine_griglia { 
transform: scale(1.2);
filter: brightness(70%);
outline: solid 10px #888;
outline-offset: -10px;

}