[CSS] transition-delay su :hover overflow
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.
Codice:
<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>
