[CSS] transition-delay su :hover overflow

[shrph]

Buonasera. Torno a chiedere aiuto dopo anni.
Non riesco a far una transizione graduale (o anche delay, che si voglia) dell'overflow hidden-visible.
Ho letto che una transizione non è possibile perché i valori sono 0 o 1. È vero? E allora un delay? In conflitto con le altre transition?
Chiedo aiuto ai pontenti di Altervista. Grazie.

<style>#scatola {
  background-color:white;
  margin: auto;
  max-width:636px;
  /* padding: 10px; */

  text-align: center;
  position: relative;
  /* display: flex; */
  padding: 16px 20px;
  color:black;
  text-align:center;
  vertical-align: middle;
  outline-style: solid;
  outline-width: thin;
  outline-color: white;
  -moz-transition: all .25s ease-in;
  -o-transition: all .25s ease-in;
  -webkit-transition: all .25s ease-in;
  box-shadow: 4px 3px 8px -1px rgba(0,0,0,1);
  -webkit-box-shadow: 4px 3px 8px -1px rgba(0,0,0,1);
  -moz-box-shadow: 4px 3px 8px -1px rgba(0,0,0,1);
margin-bottom:15px;
overflow:hidden;
}
#scatola:hover{
  background-color: black;
  color:white;
  outline-style: solid;
  outline-color: white;
  /* border-style: solid */
  box-shadow: 4px 3px 20px -11px rgba(255,255,255,1) inset;
  -webkit-box-shadow: 4px 3px 20px -11px rgba(255,255,255,1) inset;
  -moz-box-shadow: 4px 3px 20px -11px rgba(255,255,255,1) inset;
  transition:0.5s;
  -webkit-transition-delay: 0.5s;  -o-transition-delay: 0.5s;  transition-delay: 0.5s;  
overflow:visible;
/*  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;*/

}
.bg{
  pointer-events: none;
  /* display:inline; */

   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
   -moz-transition: all .25s ease-in;
   -o-transition: all .25s ease-in;
   -webkit-transition: all .25s ease-in;
}
</style>
<a href="https://duckduckgo.com">
    <div id="scatola" class="audio scatola">
      <img src="img/audio.svg" class="logo" alt="audio">
			<img src="https://via.placeholder.com/300.png/09f/fff" class="bg" alt="audio-bg">
      <p>Audio</p>
    </div></a>

[GraphOGLRisorse]

Salve,
le ho fatto un esempio usando anche parte del suo codice, per matenere lo stesso effetto grafico. Il demo fa l'animazione di scorrimento dell'elemento azzurro sovrapposto a quello bianco. Spero di non aver frainteso ciò che voleva.

L'esempio e questo: Esempio_overflow_hidden_visible.html

Crdiali saluti.

[shrph]

[...]

Ciao! Ti ringrazio per il tuo codice ma sfortunatamente non è quello che serve a me. Nello specifico, a me non serve animare l'espansione di un rettangolo ma proprio mostrare l'overflow di un'immagine in formato SVG. Forse in quanto SVG si potrebbe implementare qualche animazione extra?

Per velocizzare tutto ho caricato una seconda versione del mio sito in questione a questo indirizzo. Se hai un occhio rapido noterai che quando fai l'hover sui rettangoli, le immagini in svg ci mettono qualche instante in più prima di diventare bianche. Mi dà fastidio quello scatto.

Ho fatto anche un codepen

[shrph]

Sistemato, si può chiudere

[GraphOGLRisorse]

Mi fa piacere che sia riuscito a trovare una soluzione.

Avevo letto anche la sua utima risposta, ma non avendo una soluzione al momento, ho preferito non rispondere a vuoto.

Potrebbe gentilmente riportare la soluzione che ha adottato?
Così eventuali utenti che capitano qui per lo stesso problema, potranno disporre della soluzione.

Cordiali saluti.